How to fix the “You are binding v-model directly to a v-for iteration alias” error in Vue.js?

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.

How to fix the “You are binding v-model directly to a v-for iteration alias” error in Vue.js?

Conclusion