vue.js - Vue : binding with v-model in custom checkbox component doesn't work

Question

我正在尝试使用带有选项和值的数组中的 v-for 循环生成的选项构建一个自定义复选框组件。如何将 v-model 正确绑定(bind)到复选框组件，以便正确更新？

现在的问题是模型只更新到最新的选中复选框，并且没有提供包含所有选中选项的数组。

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>

Answer 1

当你这样做

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

它像

myCheckBoxModel = e.target.value

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

添加 value属性(property)给 ui-checkbox组件可以访问 myCheckBoxModel 的当前值. Value是此目标的默认属性名称(参见 vue guide)。

在您的 onChange方法将当前值复制到变量中，因为它不好改变 value直接置业

如果您的复选框被选中，则将对应的值推送到数组。如果未选中该复选框，则从数组

中删除对应的值

发射 input以结果数组为值的事件

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 时复选框的状态相应改变。如果你这样做，你需要观看value您的 ui-checkbox 中的属性(property)组件:根据复选框的值是否在 value 中设置复选框的状态大批。在 created 中也这样做如果要通过 myChexkboxModel 初始化复选框的状态，则 Hook