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

Question

对于带有v-model的多个复选框，我有一个奇怪的问题（至少对我而言）。当使用多个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 - 请记住没有错误。我只是想知道这是否真的那么复杂。

Answer 1

答案是，不。您可以以不同的方式执行此操作 magic ，但需要完成此操作。

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