Vue:在自定义复选框组件中与v-model绑定不起作用 [英] Vue: binding with v-model in custom checkbox component doesn't work

问题描述

我正在尝试构建带有选项的自定义复选框组件，这些选项是通过带有选项和值的数组的v-for循环生成的.如何将v模型正确绑定到复选框组件，以便正确更新它?

I'm trying to build a custom checkbox component with options that are generated with a v-for loop from an array with options and values. How can I bind the v-model correctly to the checkbox component so that it's correctly updated?

现在的问题是该模型仅更新到已选中的最新复选框，而没有给出具有所有选中选项的数组.

The problem now is that the model only updates to the latest checkbox that is checked and does not give an array with all checked options.

Vue.component('ui-checkbox', {
	 props: {   
    label: {
      type: String,
      required: true,
    },
    index: {
      type: Number
    },
    inputValue: {
      type: String
    }
  },
  methods: {
    onChange(e) {
      this.$emit('input', e.target.value);
    },
  },
	template: `<div>
    <input 
      :id="index"
      type="checkbox"
      :value="inputValue"
      @change="onChange" />
    <label :for="index">
      {{ label }}
    </label>
  </div>`,
})

new Vue({
  el: "#app",
  data: {
    checkOptions: [
      {
        label: 'Option 1',
        value: 'value of option 1',
      },
      {
        label: 'Option 2',
        value: 'value of option 2',
      },
      {
        label: 'Option 3',
        value: 'value of option 3',
      },
      {
        label: 'Option 4',
        value: 'value of option 4',
      },
    ],
    myCheckBoxModel: []
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <span>checked Checkboxes: {{ myCheckBoxModel }} </span>
   <ui-checkbox
     v-for="(option, index) in checkOptions"
     v-model="myCheckBoxModel"
     :key="index"
     :index="index"
     :input-value="option.value"
     :label="option.label" />    
</div>

推荐答案

执行时

this.$emit('input', e.target.value);

它的作用类似于

myCheckBoxModel = e.target.value

因此，它只是将您单击的最后一个复选框的值分配给myCheckBoxModel. 如果要将所有选中的项目保留在myCheckBoxModel中，则需要执行以下操作:

So it just assigns the value of the last checkbox you clicked to myCheckBoxModel. If you want to keep all checked items in myCheckBoxModel, you need to do the following:

1. 将value属性添加到ui-checkbox组件，以便可以访问myCheckBoxModel的当前值. Value是该目标的默认属性名称(请参见 vue指南).
2. 在您的onChange方法中，将当前值复制到该变量中，因为直接更改value属性并不好
3. 如果您的复选框已选中，则将对应的值推送到数组.如果未选中该复选框，请从数组中删除对应的值
4. 发出input事件，并将结果数组作为值

1. add value property to ui-checkbox component to have access to the current value of myCheckBoxModel. Value is default property name for this goal (see vue guide).
2. in your onChange method copy the current value to the variable, because it's not good to mutate value property directly
3. if your checkbox is checked, push the correspondent value to the array. If the checkbox is not checked, delete to correspondent value from the array
4. emit input event with the resulting array as value

Vue.component('ui-checkbox', {
    	 props: {   
        label: {
          type: String,
          required: true,
        },
        index: {
          type: Number
        },
        inputValue: {
          type: String
        },
        value: {
          type: Array
        }
      },
      methods: {
        onChange(e) {
          let currentValue = [...this.value]
          if (e.target.checked) {
            currentValue.push(e.target.value) 
          } else {
            currentValue = currentValue.filter(item => item !== e.target.value)
          }
          this.$emit('input', currentValue);
        },
      },
    	template: `<div>
        <input 
          :id="index"
          type="checkbox"
          :value="inputValue"
          @change="onChange" />
        <label :for="index">
          {{ label }}
        </label>
      </div>`,
    })

    new Vue({
      el: "#app",
      data: {
        checkOptions: [
          {
            label: 'Option 1',
            value: 'value of option 1',
          },
          {
            label: 'Option 2',
            value: 'value of option 2',
          },
          {
            label: 'Option 3',
            value: 'value of option 3',
          },
          {
            label: 'Option 4',
            value: 'value of option 4',
          },
        ],
       myCheckBoxModel: []
      }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <div id="app">
  checked Checkboxes:
       <span v-for="item in myCheckBoxModel"> {{ item }}; </span>
       <ui-checkbox
         v-for="(option, index) in checkOptions"
         v-model="myCheckBoxModel"
         :key="index"
         :index="index"
         :input-value="option.value"
         :label="option.label" />    
  </div>

我不知道您是否需要以编程方式设置复选框状态，即，当您更改myCheckBoxModel时，复选框的状态会相应地更改.如果这样做，则需要监视ui-checkbox组件中的value属性:根据复选框的值是否在value数组中来设置复选框的状态.如果要通过myChexkboxModel

I don't know if you need to set checkbox state programmatically, i.e. when you change myCheckBoxModel the state of checkboxes changes correspondently. If you do, you need to watch value property in your ui-checkbox component: set the state of the check box in dependance of if its value is in value array. Do the same also in created hook if you want to initialize the state of checkboxes by myChexkboxModel

这篇关于Vue:在自定义复选框组件中与v-model绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！