Vuex + VueJS: 계산된 속성을 하위 항목에 전달하는 것은 정의되지 않음

Vuex + VueJS: 계산된 속성을 하위 항목에 전달하는 것은 정의되지 않음

Vue 구성 요소에 대한 이 설명서를 읽고 있지만 구성 요소 속성에 Vuex 데이터를 사용하고 있다.

이 예에서 다음과 같이 한다.country_id에 있다data그것이 잘 작동하는 방법.하지만 언제country_id하위 구성 요소의 Vuex 저장소에서 데이터를 반환하는 계산된 속성internalValue항상 다음과 같이 초기화됨undefined.

내가 뭘 잘못하고 있는 거지?

상위 구성 요소:

export default {
    computed: {
        country_id() {
            return this.$store.state.user.country_id
        }
    },
    mounted: function () {
        this.$store.dispatch('user/load');
    }
}

<template>
   <child v-model="country_id"></child>
</template>

하위 구성 요소:

export default {
    props: [ 'value' ],
    data: function() {
        return {
            internalValue: null,
        };
    },
    mounted: function() {
        this.internalValue = this.value;
    },
    watch: {
        'internalValue': function() {
            this.$emit('input', this.internalValue);
        }
    }
};

<template>
   <p>Value:{{value}}</p>
   <p>InternalValue:{{internalValue}}</p>
</template>

상위 구성 요소가 해당 구성 요소가 가진 값을 전달함country_id하위 구성 요소에 대한 자세한 내용은 다음을 참조하십시오.mounted라이프사이클 후크 화재당신의 그 이후로.$store.dispatch그 때까지 일어나지 않는다, 그것은 처음 있는 일이다.undefined.

자식 구성 요소가 설정을 하는 경우internalValue그 안에mounted초기 라이프사이클 후크value의 소품.undefined. 그러면 언제.country_id상위 업데이트, 하위 구성 요소의 업데이트value속성은 업데이트되지만internalValue남아 있을 것이다undefined.

너는 만들어야 한다.internalValue계산된 속성도:

computed: {
  internalValue() {
    return this.value;
  }
}

---

또는 하위 구성 요소를 렌더링할 때까지 기다리십시오.country_id정의됨:

<child v-if="country_id !== undefined" v-model="country_id"></child>

참조URL: https://stackoverflow.com/questions/44041760/vuex-vuejs-passing-computed-property-to-child-is-undefined