I am facing a challenge in setting the index of a v-for loop to a dynamic v-model. I have tried a method that works, but it is not elegant and results in errors in the console:
Here is 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">Number:</label>
<input v-model="ob.number.$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.number.$dirty && !ob.number.required">Start date is required</div>
</div>
</div>
In the script section:
export default {
data () {
return {
especifications: [{
description: '',
number: '',
quantity: ''
}],
}
}
}
Errors encountered:
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)