英文:
How do I use $emit in the loop to pass the array value to the parent?
问题
子组件将通过循环将值传递给父组件
然后父组件将对该值执行某些操作
我犯了一个错误，父组件无法接收子组件，每个传递的值都会丢失
子组件
let array = [{a: '1', b: '2'}, {a: '3', b: '4'}, {a: '5', b: '6'}, {a: '1', b: '2'}, ....]
for (let index in array) {
this.$emit('update', array[index])
}
父组件
update(product) {
console.log(product);
}
在我的控制台中，我只能获取到部分子组件传递的值
这是什么错误，我该如何修复它？
这是我的示例，尽管无法重现错误，但代码是相同的，只是父组件没有显示所有内容。
英文:
The child component will pass the value to the parent component through a loop
And the parent component will do something with the value
I have a mistake, the parent component cannot receive the child component, and each passed value will be missing
child component
let array =[{a:'1',b:'2'},{a:'3',b:'4'},{a:'5',b:'6'},{a:'1',b:'2'},....]
for(let index in array){
this.$emit('update', array[index])
}
parent component
update(product) {
console.log(product);
}
In my console I can only get part of the children pass value
What is this error and how can I fix it？
This is my sample, although the error cannot be reproduced, the code is the same, except that the parent does not display all
答案1
得分: 1
Your code should work fine, I did not see any issue in your code. I am assuming you are capturing the event emitted from the child into the parent component like this.
<child @update="update"></child>
Working Demo :
Vue.component('child', {
data() {
return {
arr: [{a:'1',b:'2'}, {a:'3',b:'4'}, {a:'5',b:'6'},{a:'1',b:'2'}]
}
},
mounted() {
for(let index in this.arr){
this.$emit('update', this.arr[index])
}
}
});
var app = new Vue({
el: '#app',
methods: {
update(product) {
console.log(product);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js"></script>
<div id="app">
<child @update="update"></child>
</div>
Suggestion : To improve the performance, Instead of emitting each element into the parent component, My suggestion would be to pass the whole array and then do the data manipulations in the parent component itself.
英文:
Your code should work fine, I did not see any issue in your code. I am assuming you are capturing the event emitted from the child into the parent component like this.
<child @update="update"></child>
Working Demo :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Vue.component('child', {
data() {
return {
arr: [{a:'1',b:'2'}, {a:'3',b:'4'}, {a:'5',b:'6'},{a:'1',b:'2'}]
}
},
mounted() {
for(let index in this.arr){
this.$emit('update', this.arr[index])
}
}
});
var app = new Vue({
el: '#app',
methods: {
update(product) {
console.log(product);
}
}
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js"></script>
<div id="app">
<child @update="update"></child>
</div>
<!-- end snippet -->
Suggestion : To improve the performance, Instead of emitting each element into parent component, My suggestion would be to pass whole array and then do the data manipulations in the parent component itself.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论