Question

只是碰到我以前没有遇到的这个错误：“你将v-model直接绑定到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>

错误消息似乎表明我需要让事情变得更复杂，并使用对象而不是简单的字符串，这对我来说似乎不合适。我错过了什么吗？

Answer 1

由于您正在使用v-model，因此您希望能够从输入字段更新run值（text-field是基于文本输入字段的组件，I假设）。

该消息告诉您，您无法直接修改v-for别名（run是）。相反，您可以使用index来引用所需的元素。您同样会在index中使用removeRun。

＆＃13;

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

＆＃13;

<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>

＆＃13;

“您将v-model直接绑定到v-for迭代别名”

1 个答案: