index of v-for as value for v-model

Question

I need to set the index of a v-for to a dynamic v-model, but I don't know how to do that without trigger an error, I have tried this that works but is not elegant and gave me errors in the console:

In my template section:

<div v-for="(ob, index) in $v.especifications.$each.$iter" :key="index" class="row">
    <div class="form-group" :class="{ 'form-group--error': $v.$error }">
        <label for="number">Número:</label>
        <input v-model="ob.numero.$model = parseInt(index)+1" type="number" class="form-control" id="number" aria-describedby="number" disabled>
        <div class="alert alert-danger" role="alert" v-if="ob.numero.$dirty && !ob.numero.required">Es requerida una fecha de inicio</div>
    </div>
</div>

In my script section:

export default {
    data () {
      return {
        especifications: [{
          descripcion: '',
          numero: '',
          cantidad: ''
        }],
      }
    }
  }

Errors:

Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'v-model' directives require the attribute value which is valid as LHS (vue/valid-v-model)

And

error: 'v-model' directives cannot update the iteration variable 'x' itself (vue/valid-v-model)

`v-model` expects to be able to read and write a variable. It can't write to what you have bound. What are you hoping to have happen? — Roy J, Dec 19 '18 at 21:33

score 0 · Answer 1 · answered Dec 19 '18 at 21:37

Use :value=ob.numero.$model and not a v-model

and then add an @change handler:

@change="updateNumero(index, $model)"

and then create that function:

methods: {
  updateNumero(index, model) {
    $v.especifications.$each.$iter[index].numero[model] = parseInt(index) +1
  }
}

I won't guarantee that this is reactive, but it'll work.

index of v-for as value for v-model

1 Answers1