发布索引数组 Vue.js Axiom

Question

我可以在 Vue 中发布一个对象数组，但是我无法发布一个简单的索引数组。我给出了简化的代码，因为我认为答案对于有经验的人来说是显而易见的。

这是我到目前为止所得到的......

<section v-for="(item, index) in items">
  <div>
    <button @click.prevent="deleteItem(index)">delete</button>
    <input type="text" v-model="item[index]" placeholder="enter your item here">
  </div>
</section>
<div>
  <button @click.prevent="addItem">add item</button>
</div>

目前为止的 Vue 实例数据对象：

data () {
  return {
    items: ['']
  }
},

什么有效：

• 用户可以在表单上添加/删除行。
• Vue DevTools 向我显示了一个索引数组，其中每一行都有空字段。

JS 控制台中的错误消息：

我想在帖子中看到这个...

{ "items": ["item1 input value", "item2 input value"] }

相反，我只能得到这个，因为 Vue 不会对输入更改做出反应......

{ "items": ["", ""] }

为了比较，发布一个对象数组的工作方式如下：

<section v-for="(item, index) in items">
  <div>
    <button @click.prevent="deleteItem(index)">delete</button>
    <input type="text" v-model="item.color" placeholder="enter color here">
    <input type="text" v-model="item.price" placeholder="enter price here">
    <input type="text" v-model="item.comment" placeholder="enter comment here">
  </div>
</section>
<div>
  <button @click.prevent="addItem">add item</button>
</div>

Vue 实例数据对象：

data () {
  return {
    items: [{ color: '', price: '', comment: '' }]
  }
},

Answer 1

我刚刚在另一个论坛上收到了答案。 太傻了... item[index] 只需要是 items[index]。