如何使用Vue.js创建“全部标记”复选框？

Question

我正在学习如何使用Vue.js并尝试实现以下功能：基本上有一个'Mark All'复选框，用于更新数据属性，此更新触发其他复选框上的onchange事件。这些复选框启用或禁用它们的链接字段（有点像打开/关闭我正在构建的表单）。他们还在属性上添加字段名称，该名称将用于指示字段数据是否将在提交时发布。

这是我到目前为止的一块。

Vue.component('manual-form', { 
 
    template: ` 
 
     <div class="row"> 
 
    <div class="col-md-9"> 
 
    <div class="form-group"> 
 
     <label>Turn all on </label> 
 
     <input type="checkbox" v-on:change="enableAll($event)" class="form-check-label" /> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-2"> 
 
    <div class="form-group"> 
 
     <label>Name</label> 
 
     <input type="checkbox" v-model="checked" v-on:change="turnOnField" name="chkName" class="form-check-label" /> 
 
     <input type="text" :disabled="!checked" v-on:input="addData" name="name" placeholder="insert name" class="form-control border-input" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
    <div class="form-group"> 
 
     <label>Age</label> 
 
     <input type="checkbox" v-model="checked" v-on:change="turnOnField" name="chkAge" class="form-check-label" /> 
 
     <input name="age" :disabled="!checked" v-on:input="addData" type="text" class="form-control border-input" placeholder="enter age" /> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
     `, 
 
    data() { 
 
    return { 
 
     checked: false, 
 
     enabledFields: [] 
 
    } 
 

 
    }, 
 
    methods: { 
 
    enableAll: function(event) { 
 
     var check = event.target.checked; 
 

 
     this.checked = check; 
 
    }, 
 
    TurnOnField: function(event) { 
 
     var checkboxName = event.target.name; 
 
     checkboxName = fieldName.substring(3, checkboxName.length); 
 

 
     var field = document.querySelector("input[name='" + checkboxName + "']"); 
 

 
     var obj = { 
 
     fieldName: field, 
 
     inputData: null 
 
     }; 
 

 
     if (!enabledFields.find(obj.fieldName)) { 
 
     enabledFields.push(obj) 
 
     } 
 

 
    } 
 
    }, 
 
    addData: function() { 
 
    // It will have a underscore debounce to prevent adding every single input 
 
    // insert data on enabledFields 
 
    }, 
 
    watch: { 
 
    checked: function(obj) { 
 

 
    } 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script> 
 
<manual-form></manual-form>

然而，编程改变选中属性复选框上似乎不火的onchange事件。如果我点击它们，它们工作正常，但在使用“全部打开”复选框时，它们不起作用。我可以用jQuery实现我想要的，但我想用Vue.js来完成。

我觉得我失去了一些东西，但不知道是什么。

Answer 1

我不完全理解你的代码，但你似乎在这两个领域都使用了一个checked属性。我会做的是具有布尔data属性为每个这些字段（因此，chkNameEnabled和chkAgeEnabled），然后有enabledFields数据属性作为computed属性，检查那些布尔data属性的值，并且包括那些true的那些。

---

更新：看着一个的jsfiddle你的代码后，看来你是不看的Vue.js在控制台中产生的错误消息。

这里有一些问题，我在你的代码中发现通过查看错误信息：

• 的TurnOnField功能的第一个字母大写，但在模板代码中的第一个字母是小写（因为它应该）。
• 您在addData函数之前关闭了methods部分。
• 您在TurnOnField函数中参考enabledFields函数，而不使用 this.之前（this.enabledFields）。
• 你说checkboxName = fieldName.substring(...)没有 定义fieldName;好像你的意思是说checkboxName = checkboxName.substring(...)。

Here's JSFiddle显示“启用所有”功能，因为我会这样做。您可以使用布尔型data属性来确定“字段数据是否会在提交时发布”（如您在问题中所述）。