v-for를 사용하여 구성 요소를 채우는 Vuexgetter

v-for를 사용하여 구성 요소를 채우는 Vuexgetter

저는 vue2 구성 요소를 만들고 있습니다. vuex를 사용하여store물건.구성 요소는 다음과 같습니다.

<template>
    <ul id="display">
        <li v-for="item in sourceData()">
            {{item.id}}
        </li>
    </ul>
</template>

<script>  
    export default {
        mounted: function () {
            console.log('mounted')
        },
        computed: {
            sourceData: function() {
                return this.$store.getters.visibleSource
            }
        }
    }
</script>

스토어는 프로세스 시작 시 javascript 기본 항목인 Ajax 호출을 통해 채워집니다.

new Vue({
    store,
    el: '#app',
    mounted: function() {
        this.$http.get('/map/' + this.source_key + '/' + this.destination_key)
            .then(function (response) {
                store.commit('populate', response.data)
            })
            .catch(function (error) {
                console.dir(error);
            });
    }
});

오류가 표시되지 않으며 Vue devtools 탐색기를 사용하면 구성 요소가sourceData속성은 수백 개의 항목으로 채워집니다.일단 이 데이터가 채워지면, 저는 많은 데이터들을 볼 수 있을 것이라고 기대합니다.li와의 말다툼.item.id페이지에 표시됩니다.

그러나 구성 요소에 오류가 없고 데이터가 좋은 것처럼 보이지만 템플릿이 아무것도 렌더링하지 않습니다.

vuex 저장소가 채워진 후 구성 요소를 실행하기 위해 일종의 콜백을 사용해야 합니까?

편집: 스토어 코드 추가:

import Vue from 'vue';
import Vuex from 'vuex';
import { getSource, getDestination } from './getters'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        field_source: [],
        field_destination: []
    },
    getters: {
        visibleSource: state => {
            // this just does some formatting 
            return getSource(state.field_source)
        },
        visibleDestination: state => {
            return getDestination(state.field_destination)
        }
    },
    mutations: {
        populate(state, data) {
            state.field_source = data.source
            state.field_destination = data.destination
        }
    }
})

EDIT2: 아마도 그것은 문제가 아닐 것입니다.v-for렌더링 중인 템플릿에서 아무것도 보이지 않습니다. 메인도 보이지도 않습니다.ul태그, 스크립트에 추가적인 문제가 있더라도 (빈 상태로) 표시될 것으로 예상됩니다.

sourceData메서드가 아니라 계산된 속성입니다.호출할 필요가 없습니다.처럼 사용하지 마세요.v-for="item in sourceData()"처럼 사용합니다.v-for="item in sourceData".

그 외에는, 당신의'populate'관찰/수정된 개체를 덮어쓰고 있는 돌연변이.

다음 중 하나를 사용합니다.

mutations: {
    populate(state, data) {
        // was state.field_source = data.source
        Vue.set(state, 'field_source', data.source);
        // was state.field_destination = data.destination
        Vue.set(state, 'field_destination', data.destination);
    }
}

또는 모든 요소를 기존의 관찰/반응형 어레이에 푸시합니다.

mutations: {
    populate(state, data) {
        // was state.field_source = data.source
        state.field_source.push(...data.source);
        // was state.field_destination = data.destination
        state.field_destination.push(...data.destination);
    }
}

언급URL : https://stackoverflow.com/questions/49118955/vuex-getter-to-populate-a-component-using-v-for