Question

我正在构建一个VueJS组件，当一个prop更新时需要更新数据属性，但是它没有像我期望的那样工作。

基本上，流程是有人通过我自己的自动完成组件搜索联系人，如果匹配，则会向父组件发出事件。

该联系人将属于某个组织，我将数据传递给更新数据属性的组织组件。但是它没有更新它们。

传递给组织组件的道具已更新（通过活动），但attibute if (message.innerHTML.indexOf("Email Address already exists!") >= 0) { ... }的数据未显示此更改。

这是我组件结构的一个例子......

这是我的代码......

父组件

values

子组件（闪烁组织）

    <template>
        <div>
            <blink-contact
                    :contact="contact"
                    v-on:contactSelected="setContact">
            </blink-contact>

            <blink-organisation 
                    :organisation="organisation" 
                    v-on:organisationSelected="setOrganisation">
            </blink-organisation>
        </div>
    </template>

    <script>
        import BlinkContact from './BlinkContact.vue'
        import BlinkOrganisation from './BlinkOrganisation.vue'

        export default {
            components: {BlinkContact, BlinkOrganisation},

            props: [
                'contact_id', 'contact_name', 'contact_tel', 'contact_email',
                'organisation_id', 'organisation_name'
            ],

            data () {
                return {
                    contact: {
                        id: this.contact_id,
                        name: this.contact_name,
                        tel: this.contact_tel,
                        email: this.contact_email
                    },

                    organisation: {
                        id: this.organisation_id,
                        name: this.organisation_name
                    }
                }
            },

            methods: {
                setContact (contact) {
                    this.contact = contact
                    this.setOrganisation(contact.organisation)
                },

                setOrganisation (organisation) {
                    this.organisation = organisation
                }
            }
        }
    </script>

如果更改道具，如何更新子组件的数据属性？

谢谢！

Answer 1

使用watch。

watch: {
    organisation(newValue){
        this.values.id = newValue.id
        this.values.search = newValue.name
    }
}

但是，在这种情况下，您可能只使用计算而不是数据属性，因为您所做的只是将值传递给搜索组件。

computed:{
    values(){
        return {
            id: this.organisation.id
            search: this.organisation.name
        }
    }
}

在道具更新时更新VueJS组件数据属性

1 个答案: