如何创建“全部标记"?复选框与 Vue.js? [英] How can I create a "Mark All" checkbox with Vue.js?

查看：23
本文介绍了如何创建“全部标记"?复选框与 Vue.js?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在学习如何使用 Vue.js 并试图实现以下目标:基本上有一个标记全部"复选框，它更新数据属性，此更新触发 onchange 事件其他复选框.这些复选框启用或禁用它们的链接字段(有点像打开/关闭我正在构建的表单).他们还在一个属性上添加了字段名称，该属性将用于指示字段数据是否会在提交时发布.

这是我目前所拥有的一部分.

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

<div class="row"><div class="col-md-2"><div class="form-group"><label>名称</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 class="col-md-4"><div class="form-group"><label>年龄</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"/>

`，数据() {返回 {检查:错误，启用字段:[]}},方法: {enableAll:功能(事件){var check = event.target.checked;this.checked = 检查；},TurnOnField:函数(事件){var checkboxName = event.target.name;checkboxName = fieldName.substring(3, checkboxName.length);var field = document.querySelector("input[name='" + checkboxName + "']");变量对象 = {字段名称:字段，输入数据:空};if (!enabledFields.find(obj.fieldName)) {enabledFields.push(obj)}}},添加数据:函数(){//它将有一个下划线去抖动以防止添加每个输入//在 enabledFields 上插入数据},手表: {检查:函数(对象){}}});

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

但是，以编程方式更改复选框上的选中属性似乎不会触发 onchange 事件.如果我单击它们，它们工作正常，但是当使用全部打开"复选框时，它们不起作用.我可以用 jQuery 实现我想要的，但我想用 Vue.js 来实现.

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

解决方案

我不完全理解您的代码，但您似乎对两个字段都使用了一个 checked 属性.我要做的是为每个字段设置一个布尔值 data 属性(因此，chkNameEnabled 和 chkAgeEnabled)，然后将 >enabledFields 数据属性作为 computed 属性，它检查那些布尔 data 属性的值并包括那些 true.

<小时>

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

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

这是一个 JSFiddle 显示启用所有"功能，我会这样做.您可以使用布尔 data 属性来确定字段数据是否会在提交时发布"(如您在问题中所说).

I'm learning how to use Vue.js and trying to achieve the following: to basically have a 'Mark All' checkbox where it updates a data property and this update triggers the onchange event on other checkboxes. These checkboxes enable or disable their linked fields (kinda like a turn on/turn off for a form i'm building). They also add the field name on a property that will be used to indicate whether the field data will be posted on submission.

Here's a piece of what i have so far.

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>

However, programatically changing the checked attribute on checkboxes seems not to fire the onchange event. If I click them, they work fine but when using the "Turn All On" checkbox, they don't work. I can achieve what I want withjQuery but I'd like to do it with Vue.js.

I feel I'm missing something but don't know what.

解决方案

I don't fully understand your code, but you seem to be using a single checked property for both fields. What I would do is have a boolean data property for each of those fields (so, chkNameEnabled and chkAgeEnabled), and then have the enabledFields data property as a computed property which checks the value of those boolean data properties and includes the ones that are true.

Update: After looking at your code in a JSFiddle, it seems you aren't looking at error messages produced by Vue.js in the console.

Here are some problems I found in your code by looking at the error messages:

Here's a JSFiddle showing "Enable All" functionality as I would do it. You can use the boolean data properties to determine "whether the field data will be posted on submission" (as you say in your question).

这篇关于如何创建“全部标记"?复选框与 Vue.js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆