Question

在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时开始搜索。一旦你点击第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

你收到警告的原因，

避免直接改变道具，因为该值将被覆盖每当父组件重新渲染时。相反，使用数据或基于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。

vuejs2在父子之间传递数据正在擦除孩子的值

1 个答案: