Question

我正在阅读此documentation on Vue components，但使用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>

Answer 1

在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>：

try {
        wordMLPackage = WordprocessingMLPackage.createPackage();

        wordMLPackage.getMainDocumentPart().addStyledParagraphOfText(
                "Heading3",
                "User information");

        wordMLPackage.getMainDocumentPart().addParagraphOfText(
                "First Name : " + firstName );
        wordMLPackage.getMainDocumentPart().addParagraphOfText(
                "Last Name : " + lastName );
        wordMLPackage.getMainDocumentPart().addParagraphOfText(
                "Email : " + emailId );
        wordMLPackage.getMainDocumentPart().addParagraphOfText(
                "Phone number : " + phoneNum );
        wordMLPackage.getMainDocumentPart().addParagraphOfText(
                "Company name : " + companyName );
        wordMLPackage.getMainDocumentPart().addStyledParagraphOfText(
                "Heading3", "Static content");
        wordMLPackage
                .getMainDocumentPart()
                .addParagraphOfText(
                        "This section is to demonstrate static text in the generated document.");



        Path path = Paths.get(filePath);
        // if directory exists?
        if (!Files.exists(path)) {
            try {
                Files.createDirectories(path);
            } catch (IOException e) {
                // fail to create directory
                e.printStackTrace();
            }
        }

        //Enable change tracking
        enableDocxChangeTracking(wordMLPackage);
        // Now save it
        wordMLPackage
                .save(new java.io.File(filePath
                        + System.getProperty("file.separator") + fileName
                        + ".docx"));

    } catch (InvalidFormatException e) {
        e.printStackTrace();
    } catch (Docx4JException e) {
        e.printStackTrace();
    } catch (Exception e) {
        e.printStackTrace();
    }

Vuex + VueJS：未定义将计算属性传递给子级

1 个答案: