javascript - Vuex + VueJS: Passing computed property to child is undefined - Stack Overflow

admin管理员组

文章数量:1289540

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

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

What am I doing wrong?

Parent Component:

export default {
    puted: {
        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>

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

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

What am I doing wrong?

Parent Component:

export default {
    puted: {
        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>

• javascript
• vue.js
• vuejs2
• vuex

Share Improve this question Follow edited Jul 14, 2022 at 0:53 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked May 18, 2017 at 7:53 abeltodevabeltodev 13322 silver badges77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Your parent ponent passes the value it has for country_id to its child ponent before the mounted lifecycle hook fires. Since your $store.dispatch doesn't happen until then, it is initially undefined.

Your child ponent sets its internalValue in its mounted lifecycle hook with the initial value prop of undefined. Then, when country_id updates in the parent, your child ponent's value property will update, but the internalValue will remain undefined.

You should make internalValue a puted property as well:

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

---

Alternatively, you could wait to render the child ponent until country_id is defined:

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

本文标签： javascriptVuexVueJS Passing computed property to child is undefinedStack Overflow