如何简化自定义多复选框组件



我对带有 v 模型的多个复选框有奇怪的问题(至少对我来说(。当使用多个v-model到一个属性的复选框时,会生成普通数组,这是通过以下代码完成的:

.form-check
input.form-check-input(type=“checkbox” name=“checkbox” v-model=“methodology” value=“issue tracking tool”)
label.form-check-label issue tracking tool

但是,当我尝试将其移动到单个文件组件时,我不得不从 Vue.js 论坛复制一些神奇的技巧才能使其工作。我仍然怀疑一定有更简单的方法来实现它。我无法想象它不是用简单的解决方案解决的,因为它是一种非常常见的模式(组件中的复选框 - 没有什么异国情调的,对吧?任何帮助表示赞赏!

这是工作 jsfiddle - 请记住没有错误。我只想知道这是否真的必须那么复杂。

答案是否定的。你也许可以以不同的方式做这个魔术,但它需要完成。

Vue 必须在幕后为复选框做魔术,因为与所有其他输入不同,所有其他输入都有一个更新的项目,复选框必须管理 a 值是否在数组中。这意味着侦听器和值必须在包装器和输入之间修补。

最新更新