我如何才能创建一个；标记“全部”；是否选中Vue.js的复选框？

我正在学习如何使用Vue.js并尝试实现以下目标：基本上有一个“全部标记”复选框，用于更新数据属性，此更新会触发其他复选框上的

onchange

事件。这些复选框启用或禁用它们的链接字段（有点像打开/关闭我正在构建的表单）。它们还将字段名称添加到属性上，该属性将用于指示字段数据是否将在提交时过账

这是我到目前为止所拥有的一部分

Vue.component（'manual-form'{
模板：`
全部打开
名称
年龄
`,
数据（）{
返回{
勾选：假，
启用字段：[]
}
},
方法：{
enableAll:函数（事件）{
var check=event.target.checked；
this.checked=检查；
},
TurnOnField:功能（事件）{
var checkboxName=event.target.name；
checkboxName=fieldName.substring（3，checkboxName.length）；
var field=document.querySelector（“输入[name=”+checkboxName+“]”）；
var obj={
字段名：字段，
inputData:空
};
如果（！enabledFields.find（obj.fieldName））{
启用字段推送（obj）
}
}
},
addData:function（）{
//它将有一个下划线去模糊，以防止添加每个输入
//在enabledFields上插入数据
},
观察：{
选中：功能（obj）{
}
}
});
我不完全理解您的代码，但您似乎对这两个字段都使用了一个
选中的
属性。我要做的是为每个字段（因此，
chknamenabled
和
chkAgeEnabled
）设置一个布尔
data
属性，然后将
启用字段
数据属性作为
计算的
属性，该属性检查那些布尔
数据
属性的值，并包括那些
为真的属性


更新：在JSFIDLE中查看代码之后，您似乎没有看到Vue.js在控制台中生成的错误消息

下面是我通过查看错误消息在您的代码中发现的一些问题：


TurnOnField
函数的第一个字母大写，但在模板代码中，第一个字母的大小写应该是小写的
在使用
addData
功能之前，请先关闭
methods
部分
您可以在
TurnOnField
功能中引用
enabledFields
，而不使用
this.
在它前面（
this.enabledFields
）
你说
checkboxName=fieldName.substring（…）
而没有
定义的
字段名
；你好像想说
checkboxName=
checkboxName.substring（…）

一个显示“全部启用”功能的JSFIDLE，正如我所做的那样。您可以使用布尔值
数据
属性来确定“提交时是否发布字段数据”（如您在问题中所说）。
少考虑小部件，多考虑建模状态的数据。问题是，我真正想做的是更改一个属性以启动onChange事件。我想通过代码来实现这一点，但我认为Vue的反应性不允许这样做。但为什么要这样做呢？这样你就可以有一个“全部启用”复选框了吗？如果是这样的话，那可能只是另一个布尔数据属性，它有一个“监视”函数，当“全部启用”属性为true时，它会将其他布尔数据属性设置为all true，当它为false时，它会将其他布尔数据属性设置为all false。您的回答似乎很好。问题是，我认为可以通过更改checked属性来触发onChange事件。显然不是。