在道具更新时更新VueJS组件数据属性 [英] Updating VueJS component data attributes when prop updates

问题描述

我正在构建一个VueJS组件，它需要在更新道具时更新数据属性，但是它没有按照我的预期运行。

I'm building a VueJS component which needs to update the data attributes when a prop is updated however, it's not working as I am expecting.

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

Basically, the flow is that someone searches for a contact via an autocomplete component I have, and if there's a match an event is emitted to the parent component.

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

That contact will belong to an organisation and I pass the data down to the organisation component which updates the data attributes. However it's not updating them.

传递给组织组件的道具已更新（通过事件）但数据attibute 值未显示此更改。

The prop being passed to the organisation component is updated (via the event) but the data attibute values is not showing this change.

这是我的组件结构的说明......

This is an illustration of my component's structure...

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

Here is my code...

父组件

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

子组件（眨眼组织）

        <template>
        <blink-org-search
                field-name="organisation_id"
                :values="values"
                endpoint="/api/v1/blink/organisations"
                :format="format"
                :query="getQuery"
                v-on:itemSelected="setItem">
        </blink-org-search>
    </template>

    <script>
        export default {
            props: ['organisation'],

            data() {
                return {
                    values: {
                        id: this.organisation.id,
                        search: this.organisation.name
                    },
                    format: function (items) {
                        for (let item of items.results) {
                            item.display = item.name
                            item.resultsDisplay = item.name
                        }
                        return items.results
                    }
                }
            },

            methods: {
                setItem (item) {
                    this.$emit('organisationSelected', item)
                }
            }
        }
    </script>

如果道具发生变化，我如何更新子组件的数据属性？

How can I update the child component's data properties when the prop changes?

谢谢！

推荐答案

使用观看。

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

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

In this case, however, it looks like you could just use a computed instead of a data property because all you are doing is passing values along to your search component.

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

这篇关于在道具更新时更新VueJS组件数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！