我在调用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-in-next的模板中,就在这个表单之后。我想如果info数组被更新,那么在模板中使用它也会更新。但是在我成功地将这些数据发送到数据库和更新信息之后,新的项在模板中的v-for迭代中不可见。

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

我刚接触vue,但我想我应该用某种方式使用数据绑定。

解决了的

我把值推送到info数组,而不是像这样推一个对象,

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