프로포스를 갱신할 때 VueJS 컴포넌트 데이터 속성 갱신

프로포스를 갱신할 때 VueJS 컴포넌트 데이터 속성 갱신

프로펠을 갱신할 때 데이터 속성을 갱신해야 하는 VueJS 컴포넌트를 빌드하고 있습니다만, 예상대로 동작하지 않습니다.

기본적으로 누군가가 내가 가지고 있는 자동 완성 컴포넌트를 통해 컨택을 검색하고 일치하는 것이 있으면 이벤트가 부모 컴포넌트로 전송됩니다.

그 연락처는 조직에 속하며, 나는 데이터 속성을 갱신하는 조직 구성 요소에 데이터를 전달합니다.하지만 업데이트는 되지 않습니다.

이벤트를 통해 조직 구성요소로 전달되는 소품은 업데이트되지만 데이터 속성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>

하위 컴포넌트(깜빡 조직)

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

소품이 변경될 때 하위 구성요소의 데이터 속성을 업데이트하려면 어떻게 해야 합니까?

감사합니다!

시계를 사용하다.

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

그러나 이 경우 검색 구성 요소에 값을 전달하는 작업만 수행되므로 데이터 속성 대신 계산 기능을 사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/44570949/updating-vuejs-component-data-attributes-when-prop-updates