Firestore 데이터의 중첩된 v-for 루프는 변경 시 가장 깊은 계층을 반응적으로 복제합니다.

Firestore 데이터의 중첩된 v-for 루프는 변경 시 가장 깊은 계층을 반응적으로 복제합니다.

파이어스토어에 중첩된 데이터가 있는데, 이 데이터를 중첩된 목록으로 표시하려고 합니다.그러나 Firestore 데이터베이스에서 값을 변경해도 두 번째 수준의 값은 업데이트되지 않습니다.

로드 시 올바른 것으로 표시됩니다.

그러나 "온도1"을 "온도"로 변경하면 다음과 같이 업데이트됩니다.

페이지를 다시 로드하면 모든 것이 다시 올바르게 표시됩니다.

최상위 수준 이름(예: Cactus)을 변경하면 예상대로 동작합니다(이름이 반응적으로 업데이트됨).

두 번째 레벨 문자열도 중복 없이 단순히 반응적으로 업데이트되도록 하려면 어떻게 해야 합니까?

이것은 Firestore에 있는 내 데이터 구조입니다. (id는 자동 생성 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 구성 요소(기본 보기):대시보드.가치관

<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 = []
            }
        }
    }
})

문제의 첫 번째 부분("Firestore 데이터베이스에서 값을 변경하면 두 번째 수준의 값이 업데이트되지 않습니다.")은 Firestore의 읽기가 얕다는 사실에서 비롯됩니다.

당신의 첫번째onSnapshot()는 다음 쿼리의 결과를 수신합니다.

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

또한 컬렉션에서 문서를 쿼리해도 하위 컬렉션에서 데이터를 가져오지 않습니다.결과적으로, 첫 번째는onSnapshot()에서 문서를 변경할 때 트리거합니다.tiles수집, 그러나 에서 문서를 변경할 때 트리거되지 않습니다.services서브 컬렉션

언급URL : https://stackoverflow.com/questions/53897571/nested-v-for-loop-on-firestore-data-reactively-duplicates-deepest-layer-on-chang