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

在VueJS 2中我试图创建一个组件，它获取数据并将数据传递回父级，然后将数据传递给另一个组件以进行显示。vuejs2在父子之间传递数据正在擦孩子值

获取数据的组件具有用于搜索的用户输入字段。当我有它传递数据回到父母使用$发射输入中的值继续被擦除。

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

“避免直接对prop进行变异，因为当父组件重新呈现时，该值将被覆盖，而是根据prop的值使用数据或计算属性，prop被突变：”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>' 
})

;

来源

2017-04-18 tachi

你得到警告的原因，

避免直接变异的一个道具，因为该值将被覆盖每当父组件重新呈现。相反，使用基于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。

来源

2017-04-18 02:02:25 Bert

非常感谢，完美的作品:) – tachi

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

回答

相关问题