Vuex + VueJS: Passing computed property to child is undefined

Viewed 7272

I'm reading through this documentation on Vue components, but using Vuex data for my component properties.

From the example, if country_id is in the data method it works fine. But when country_id is a computed property returning data from the Vuex store, the child component's internalValue is always initialized as undefined.

What am I doing wrong?

Parent Component:

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>

Child Component:

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>
1 Answers
Related