错误计数 Vuejs $emit答案

【问题标题】：Wrong count Vuejs $emit错误计数 Vuejs $emit
【发布时间】：2022-01-02 01:25:24
【问题描述】：

我有父组件和子组件，将数据从子组件传递给父组件。在父组件中，我想输出数组的长度。但是计数出错了，它只在第二次点击后开始，而不是在第一次点击之后{{ checkedBrands.length }}

家长：

<v-search-bar @action='takeBrands'/>

数据：

 checkedBrands: [],

vue:

takeBrands(data) {
  this.checkedBrands = data;
},

孩子：

<label class='custom-checkbox'>
 <input type='checkbox' :value='item.title' v-model='checkedBrands'>
 <span @click='action'>{{ item.title }}</span>
</label>

action() {
  this.$emit('action', this.checkedBrands);
},

我需要添加/更改什么？

【问题讨论】：

你能创建一个minimal reproducible example吗？
您是否对多个孩子使用相同的checkedBrands 数组？为多个孩子覆盖相同的变量可能无法按预期工作。我们需要查看整个应用程序才能做出判断。见上面的链接。我推荐Vue开发工具。有了它们，您的浏览器可以直接查看组件值以自行调试。
@PeterKrebs 如我所见（在事件选项卡中），从第一个复选框选择中 - 创建了一个数组，但它是空的。在第二个选择中，将添加所选项目。话虽如此，在子组件中一切正常。
好的。好吧，在 Vue 中使用数组和对象有时是一个问题。如果这是问题的根源，您可以尝试不使用数组。否则，请参阅第一条评论 - 给我们一个 codepen 或其他东西。

标签： vue.js vuejs2 vue-component

【解决方案1】：

我解决了这个问题。您只需要在组件中使用“更新”挂钩即可。

【讨论】：