vuejs2在父子之间传递数据正在擦除子值答案

【问题标题】：vuejs2 passing data between parent-child is wiping childs valuevuejs2在父子之间传递数据正在擦除子值
【发布时间】：2017-09-13 16:58:23
【问题描述】：

在 VueJS 2 中，我试图创建一个组件，该组件获取数据并将其传递回父级，然后将其传递给另一个组件进行显示。

获取数据的组件有一个用于搜索的用户输入字段。当我让它使用 $emit 将数据传递回父级时，输入中的值会一直被擦除。

我收到以下突变错误，但我没有直接尝试更改组件中的 userSearch 字段，所以我不确定为什么。

“避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。正在改变的道具：“userSearch”（在 PersonField 中找到）“

相关的html

 <person-field  v-on:event_child="eventChild"></person-field>
 <person-search :prop="personListArray" ></person-search>

父应用

var app = new Vue({
el: '#app',
data: {
    personListArray : [],
    tempArray: []
},
methods: {
    eventChild: function (arr) {
        this.personListArray = arr
    }
}
})

组件 1，显示用户输入。使用输入来搜索和返回数据。当输入的长度超过 2 时开始搜索。一旦您点击第三个字符，就会导致输入清除我不想要的内容。

Vue.component('person-field', {
props: ['userSearch'],
template: '<input class="form-control" v-model="userSearch" >',
watch: {
    userSearch: function () {
        var arr = []
        if (typeof this.userSearch !== 'undefined') { //added this because once i passed 3 characters in the field the userSearch variable becomes undefined
            if (this.userSearch.length > 2) {

                $.each(this.getUsers(this.userSearch), function (index, value) {

                    var obj = {
                        Title: value.Title,
                        ID: value.ID
                    }

                    arr.push(obj)
                });

                this.$emit('event_child', arr) //emits the array back to parent "eventChild" method
            } else {
                console.log('no length')
            }
        } else {
            console.log('cant find field')
        }
    },
},
methods: {
    getUsers: function (filter) {
        //gets and returns an array using the filter as a search
        return arr
    },

 }
});

组件 2 - 基于作为道具传递的 personListArray，将结果显示为列表（可行）

Vue.component('person-search', {
props: ['prop'],
template: '<ul id="personList">' +
'<personli :ID="person.ID" v-for="person in persons">' +
'<a class="" href="#" v-on:click="fieldManagerTest(person.Title, person.ID)">{{person.Title}}</a>' +
'</personli></ul>',
computed: {
    persons: function () {
        return this.prop
    }
},
methods: {
    fieldManagerTest: function (title, ID) { //Remove item from users cart triggered via click of remove item button

        //var user = ID + ';#' + title
        //this.internalValue = true
        //this.$emit('fieldManagerTest');
        //this.$parent.$options.methods.selectManager(user)
    },
},

});

组件 3，组件 2 的一部分

Vue.component('personli', {
    props: ['ID'],
    template: '<transition name="fade"><li class="moving-item" id="ID"><slot></slot></li></transition>'
})

;

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您收到警告的原因，

避免直接改变prop，因为值会被覆盖每当父组件重新渲染时。相反，使用数据或基于道具值的计算属性。道具被变异： “userSearch”（在 PersonField 中找到）

是因为这条线

<input class="form-control" v-model="userSearch" >

v-model 将尝试更改您告诉它的表达式的值，在本例中为 userSearch，这是一个属性。

相反，您可以将userSearch 复制到局部变量中。

Vue.component('person-field', {
    props: ['userSearch'],
    data(){
        return {
             searchValue: this.userSearch
        }
    },
    template: '<input class="form-control" v-model="searchValue" >',
    ...
})

并修改您的watch 以使用searchValue。

这是example。

【讨论】：