错误计数 Vuejs $emit

Posted 2023-02-16

【中文标题】错误计数 Vuejs $emit

【英文标题】：Wrong count 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 或其他东西。

【参考方案1】：

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