vuejs2 在 parent-child 之间传递数据正在擦除孩子的价值

Question

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

获取数据的组件有一个用于搜索的用户输入字段。当我使用 $emit 将数据传回 parent 时，输入中的值不断被擦除。

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

"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "userSearch"（在 PersonField 中找到）"

相关html

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

Parent 应用

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

组件 1，显示用户输入。使用输入来搜索和带回数据。当输入的长度超过 2 时开始搜索。一旦你点击第 3 个字符，某些东西就会导致输入被清除，这是我不想要的。

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>'
})

;

Answer 1

您收到警告的原因，

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "userSearch" (found in 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.

vuejs2 在 parent-child 之间传递数据正在擦除孩子的价值

vuejs2 passing data between parent-child is wiping childs value

vue.js

vue-component

vuejs2