Question

我正在学习如何使用Vue.js并尝试实现以下目标：基本上有一个标记全部＆＃39;复选框，它更新数据属性，此更新会在其他复选框上触发onchange事件。这些复选框启用或禁用其链接字段（有点像开启/关闭表单i＆＃m; m建筑物）。他们还在属性上添加字段名称，该属性将用于指示是否将在提交时发布字段数据。

这是我迄今为止的一部分。

＆＃13;

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) {

    }
  }
});

＆＃13;

<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>

＆＃13;

但是，以编程方式更改复选框上的checked属性似乎不会触发onchange事件。如果我点击它们，它们工作正常，但使用＆＃34;全部打开＆＃34;复选框，他们不工作。我可以用jQuery实现我想要的东西，但我想用Vue.js来实现。

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

Answer 1

我不完全理解您的代码，但您似乎在两个字段中使用单个checked属性。我要做的是为每个字段（data和chkNameEnabled）都有一个布尔chkAgeEnabled属性，然后将enabledFields数据属性作为{{{ 1}}属性，用于检查那些布尔computed属性的值，并包含data的属性。

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

通过查看错误消息，我在代码中发现了一些问题：

true函数的首字母大写，但在模板代码中，第一个字母是小写的（应该是）。
在获得TurnOnField功能之前，请先关闭methods部分。
您可以在不使用addData功能的情况下参考enabledFields 它前面是TurnOnField（this.）。
你说this.enabledFields没有定义checkboxName = fieldName.substring(...);好像你想说fieldName。

Here's一个JSFiddle显示“全部启用”功能，就像我一样。您可以使用布尔checkboxName = checkboxName.substring(...)属性来确定“是否将在提交时发布字段数据”（正如您在问题中所述）。

我怎样才能创建一个＆＃34; Mark All＆＃34;与Vue.js复选框？

1 个答案: