Sometimes, we want to fix the "You are binding v-model directly to a v-for iteration alias" error in Vue.js.
In this article, we’ll look at how to fix the "You are binding v-model directly to a v-for iteration alias" error in Vue.js.
How to fix the "You are binding v-model directly to a v-for iteration alias" error in Vue.js?
To fix the "You are binding v-model directly to a v-for iteration alias" error in Vue.js, we should make sure that we don’t use iteration variables we defined in v-for as values for v-model.
For instance, we write
<template>
<table id="app">
<tr v-for="(run, index) in settings.runs">
<td>
<input
type="text"
:name="`run${index}`"
v-model="settings.runs[index]"
/>
</td>
<td>
<button @click.prevent="removeRun(index)">X</button>
</td>
<td>{{ run }}</td>
</tr>
</table>
</template>
to loop through settings.runs with v-for and render inputs for each entry.
We set v-model to settings.run[index] instead of run to let us set the settings.runs array entry values without the "You are binding v-model directly to a v-for iteration alias" being thrown.
Conclusion
To fix the "You are binding v-model directly to a v-for iteration alias" error in Vue.js, we should make sure that we don’t use iteration variables we defined in v-for as values for v-model.
