Vue不更新​​v-for信息数组

Question

我正在以调用方法AddItem（）的形式使用v-model =“ item1”。

<form @submit.prevent="AddItem">
         <input type="text" name="items" v-model="item1">
...

AddItem方法将输入数据发送到数据库，并推送到名为info []的数组。

此数组在data（）{...}中定义。

  data () {
    return {
    info: [],
    item1: null
    }
  },

方法

  AddItem(){
      db.collection('things').add({
        item1: this.item1,
      }).then(() => {
        this.info.push(this.item1)
      }).catch(err => {
          console.log(err);
        })
   }

但是此表单后面的模板中的下一个v-for中也使用了该信息。我以为如果信息数组已更新，则模板中对它的任何使用也会更新。但是，在我成功地将这些数据发送到数据库并更新了信息之后，新的项目在模板的v-for迭代中不可见。

  <li v-for="(item, index) in info" :key="index">
           <span class="item">{{ item.item1 }}</span>
        </li>

如何获取此for循环以考虑更新的信息数组？

我是vue的新手，但我猜想也许我应该以某种方式使用数据绑定。

---

已解决

我将值推送到info数组，而不是推送这样的对象，

this.info.push({item1: this.item1})

Answer 1

尝试

<li v-for="(item, index) in info" :key="index">
  <span class="item">{{ item }}</span>
</li>

您推入数组的值是一个字符串而不是一个对象（this.item1）。 另外，为了使其更简单，请尝试仅在AddItem（）中执行此操作。然后，您确定后端没有故障。

AddItem(){
  this.info.push(this.item1)
}

否则，您的代码看起来正确。将来，创建小提琴总是很方便的，这样其他人就可以更轻松地为您提供帮助。