"Вы привязываете v-модель напрямую к псевдониму v-for iteration"

Просто запустите эту ошибку, с которой я раньше не сталкивался: "Вы привязываете v-модель напрямую к псевдониму v-for итерации. Это не сможет изменить исходный массив v-for, потому что запись в псевдоним например, для модификации локальной переменной функции. Рассмотрим использование массива объектов и вместо этого используйте v-model для свойства объекта." Я немного озадачен, поскольку, похоже, я не ошибаюсь. Единственное отличие от других циклов v-for, которые я использовал ранее, заключается в том, что это немного проще, поскольку он просто перебирает массив строк, а не объекты:

 <tr v-for="(run, index) in this.settings.runs">

     <td>
         <text-field :name="'run'+index" v-model="run"/>
     </td>

     <td>
        <button @click.prevent="removeRun(index)">X</button>
     </td>

 </tr>

Сообщение об ошибке показало бы, что мне нужно сделать вещи немного сложнее и использовать объекты вместо простых строк, что мне почему-то не кажется правильным. Я что-то пропустил?

Ответ 1

Поскольку вы используете v-model, вы ожидаете, что сможете обновить значение run из поля ввода (text-field является компонентом, основанным на текстовом поле ввода, я полагаю).

В сообщении говорится, что вы не можете напрямую изменить псевдоним v-for (который run). Вместо этого вы можете использовать index для ссылки на нужный элемент. Вы бы также использовали index в removeRun.

new Vue({
  el: '#app',
  data: {
    settings: {
      runs: [1, 2, 3]
    }
  },
  methods: {
    removeRun: function(i) {
      console.log("Remove", i);
      this.settings.runs.splice(i,1);
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<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>