Как перезагрузить элементы dom на Firestore db change? - PullRequest
Новая
       67

Как перезагрузить элементы dom на Firestore db change?

0 голосов
/ 06 сентября 2018

Мы создаем приложение, используя vue.js, vuefire и Firestore, где у пользователя есть несколько ресторанов. В нашей панели инструментов тогда нужно иметь возможность «переключаться» между ресторанами для внесения изменений (например, обновление меню). Проблема в том, что на схеме «Меню», когда я переключаю рестораны, меню не меняется.

У нас есть компонент Switcher, который изменяет "activeRestaurant" пользователя как в БД, так и в хранилище vuex.

Вот соответствующий код из 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>
1010 * * и 
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)
  }
},

Если я переключусь с ресторана А на ресторан Б, ничего не изменится. Но если я затем перехожу к другому макету, он отображает содержимое для ресторана B. Если я затем нажимаю обратно в свое меню, отображаются элементы меню для ресторана B.

Как я могу сделать так, чтобы содержимое моего Меню изменилось с Ресторан А на Б, когда я переключаю Рестораны?

1 Ответ

0 голосов
/ 06 сентября 2018

Похоже, что VueFire не выполняет еще один вызов базы данных при изменении activeRestaurantId.Вы можете переписать этот код в методе для обновления, когда эта переменная изменится следующим образом: 

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.

...