javascript - VueJS : How to use a binding value within a for loop of an array?

Question

我有一个字符串数组:

myList: ['First item', 'Second item']

我想添加第三个，甚至更多。我有一个将空字符串推送到数组的方法:

this.myList.push('')

( Using .push on a Vue object is okay )

现在看起来像这样:

['First item', 'Second item', '']

我现在可以编辑了。 但是，它没有绑定(bind)到数组。添加另一个项目时，该值将丢失并返回一个空字符串。

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      myList: ['First item', 'Second item']
    }
  },

  methods: {
    remove(index) {
      Vue.delete(this.myList, index)
    },
    add() {
      this.myList.push('')
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <p v-for="(listItem, index) in myList" class="my-2 field" :key="index">
    <input
      type="text"
      :value="listItem"
      :key="index"
    />
    <button @click.prevent="remove(index)">✕</button>
  </p>
  <p>
    <button @click.prevent="add()">Add</button>
  </p>
</div>

尝试了以下操作:

如上:

<input
  type="text"
  :value="listItem"
  :key="index"
/>

没有 key ，一样:

<input
  type="text"
  :value="listItem"
/>

使用(不正确的)绑定(bind)，不回显值:

<input
  type="text"
  :value="myList[index]"
/>

使用v-bind:

<input
  type="text"
  v-bind:value="listItem"
/>

还有一把 key :

<input
  type="text"
  v-bind:value="listItem"
  v-bind:key="index"
/>

我敢肯定我的做法是错误的。希望您能看到我正在努力实现的行为。

---

更新 刚刚尝试使用 v-model，但出现此错误:

You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.

拥有一个具有一个值的对象数组可能更容易吗？

Answer 1

你应该使用 v-model 对你的输入进行双向绑定(bind)，你必须使用 myList[index] 因为 v-bind 指令需要一个属性值而不是 v-for 别名(如 listItem)。试试这个:

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      myList: ['First item', 'Second item']
    }
  },

  methods: {
    remove(index) {
      Vue.delete(this.myList, index)
    },
    add(listItem) {
      this.myList.push('')
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <p v-for="(listItem, index) in myList" class="my-2 field" :key="index">
    {{myList[index]}}
    <input
      type="text"
      v-model="myList[index]"
    />
    <button @click.prevent="remove(index)">✕</button>
  </p>
  <p>
    <button @click.prevent="add()">Add</button>
  </p>
</div>