Question

我们正在使用vue.js，vuefire和Firestore构建一个应用程序，其中一个用户有多个餐厅。然后，在我们的信息中心中，需要能够在餐厅之间“切换”以进行更改（例如，更新菜单）。问题是在“菜单”布局上，当我切换餐厅时，菜单不会更改。

我们有一个Switcher组件，它可以在数据库中以及在vuex存储中更改用户的“ activeRestaurant”。

这是来自store.js的相关代码：

switchRestaurant({ commit }, payload) {
  console.log(payload)
  db.collection('users').doc(payload.id).update({
    activeRestaurant: payload.activeRestaurant,
  })
  const activeRest = {
    activeRestaurant: payload.activeRestaurant,
    id: payload.id,
  }
  commit('setUser', activeRest)
}

在我们的菜单布局中，菜单项的呈现方式为：

<li v-for="(regularItem, idx) in regularItems" :key="idx">
    <h4>{{ regularItem.item.name }}</h4>
</li>

和

computed: {
  userAccount () {
    return this.$store.getters.user
  }
},
firestore () {
  return {
    user: db.collection('users').doc(this.userAccount.id),
    regularItems: db.collection('items').where("restaurant", "==", 
    this.userAccount.activeRestaurant.id)
  }
},

如果我从餐厅A切换到餐厅B，则没有任何变化。但是，如果我随后导航到另一个布局，则它将呈现餐厅B的内容。如果我再单击返回到菜单，它将显示餐厅B的菜单项。

当我切换餐厅时，如何使菜单内容从餐厅A更改为餐厅B？

Answer 1

当activeRestaurantId更改时，VueFire似乎没有再次调用数据库。您可以使用以下方法重新编写此代码，以在该变量发生如下更改时进行更新：

data () {
  return {
    'regularItems': []
  }
}
methods: {
  updateActiveRestaurant () {
    db.collection('items').where("restaurant", "==", this.userAccount.activeRestaurant.id)
    .get()
    .then(function (querySnapshot) {
      querySnapshot.forEach(function (doc) {
        var item = doc.data()
        item.id = doc.id
        this.regularItems.push(item)
      }.bind(this))
    }.bind(this))
  }
}

然后您可以在创建后以及activeRestaurant数据更改后添加对该函数的调用。

如何在Firestore数据库更改上重新加载dom元素？

1 个答案: