Вложенный цикл v-for для данных в хранилище реактивно дублирует самый глубокий слой при изменениях

Question

У меня есть вложенные данные в firestore, и я хочу представить их как вложенный список.Однако, когда я изменяю значение в базе данных firestore, второй уровень значений не обновляется.

При загрузке это выглядит правильно:

Но когдаЯ изменяю «Температура1» на «Температура», она обновляется следующим образом:

Если я перезагружаю страницу, все сообщения снова корректны:

Если я изменю имя верхнего уровня, например, Cactus, оно будет работать так, как ожидается (имя обновляется реактивно).

Как я могу получить строки второго уровня так же простореактивно обновлено без дублирования ??

Это моя структура данных в firestore: (id - это автоматически генерируемые идентификаторы)

-users (collection)
|-id0 (doc)
 |-name: "Niels"
 |-tiles (collection)
  |-id1 (doc)
  | |-name: "Monstera Deliciosa"
  | |-services (collection)
  |   |-id2 (doc)
  |   | |-name: "Temperature"
  |   |-id3 (doc)
  |     |-name: "Relative-humidity"
  |-id4 (doc)
    |-name: "Cactus"
    |-services (collection)
      |-id2 (doc)
        |-name: "Soil moisture"

Вот выдержки из моего кода:

Компонент My Vue (основной вид): Dashboard.vue

<template>
    <div id="dashboard">
        <ul v-for="tile in tiles" :key=tile.id>
            <li>{{ tile.name }}</li>
            <ul v-for="service in tile.services" :key=service.id>
                <li>{{service.name}}</li>
            </ul>
        </ul>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    const fb = require('../firebaseConfig.js')

    export default {
        computed: {
            ...mapState(['tiles'])
        }
    }
</script>

И мой файл store.js:

import Vue from 'vue'
import Vuex from 'vuex'
const fb = require('./firebaseConfig.js')

Vue.use(Vuex)

// handle page reload
fb.auth.onAuthStateChanged(user => {
    if (user) {
        // realtime updates from tiles
        fb.usersCollection.doc(user.uid).collection('tiles').orderBy('name', 'asc').onSnapshot(tilesSnapshot => {
            let tilesArray = []

            tilesSnapshot.forEach(tileDoc => {
                let tile = tileDoc.data()
                tile.id = tileDoc.id
                // console.log("Tile name:", tile.name)

                let servicesArray = []
                tileDoc.ref.collection('services').onSnapshot(servicesSnapshot => {
                    servicesSnapshot.forEach(serviceDoc => {
                        let service = serviceDoc.data()
                        service.id = serviceDoc.id
                        servicesArray.push(service)
                    })
                })
                tile.services = servicesArray
                tilesArray.push(tile)
            })
            store.commit('setTiles', tilesArray)
        })
    }
})

export const store = new Vuex.Store({
    state: {
        tiles: []
    },
    mutations: {
        setTiles(state, val) {
            if (val) {
                state.tiles = val
            } else {
                state.tiles = []
            }
        }
    }
})

Answer 1

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

Ваш первый onSnapshot() прослушивает результаты следующего запроса:

fb.usersCollection.doc(user.uid).collection('tiles').orderBy('name', 'asc')

И запрос документов в коллекции не извлекает данные из подколлекций ,Следовательно, первый onSnapshot() срабатывает при изменении документа в коллекции tiles, но не срабатывает при изменении документа в подгруппе services.