Question

我正在尝试创建一个复选框组件，但无法执行。如何创建三个复选框（使用icheck和输入），并使用数组中的v-model获取所有选定的复选框？问题是我可以分别获取clicked复选框的值，但是我无法获取数组中的所有值，因为这可能是vue的v模型发生的。看来，他们正在某个地方迷路。这是我的代码

<html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet">





   <div id='app'>
      <icheck  :value="'Jack'" id="jack" v-model="checkedNames"  > </icheck>
      <icheck  :value="'John'" id="john" v-model="checkedNames"  > </icheck>

      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      <br> 
      <span>Checked names: {{ checkedNames }}</span>
    </div>

 </html>


<script>
Vue.component('icheck', {
props: { 
    value:{ required: false }
},
template:  `
  <input type="checkbox"  >
`,
mounted: function () {
    var vm = this
    $(this.$el).iCheck({
      //checkboxClass: 'icheckbox_minimal',
    checkboxClass: 'icheckbox_square-red',
      //radioClass: 'iradio_minimal',
    radioClass: 'iradio_square',
      increaseArea: '20%' // optional
    })
    .val(this.value)
    .trigger('ifChanged')
    // emit event on change.  here the problem
     .on('ifChanged', (event)=>{

        let isChecked = event.target.checked
        let val = event.target.value

       //  here the problem need an array
        vm.$emit('input',isChecked ? [val]:[])
    });


  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el).val(value)
    }
  }

})

new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
})


</script>

Answer 1

这就是我要怎么做。

<icheck :val="'Jack'" id="jack" v-model="checkedNames"  > </icheck>
<icheck :val="'John'" id="john" v-model="checkedNames"  > </icheck>

props: { 
    val:{ required: true },
    value: { required: false }
},
....

// Check if the value is preset from the props and toggle check
if (this.value.includes(this.val)) {
  $(this.$el).iCheck('check');
}

$(this.$el).iCheck({
    //checkboxClass: 'icheckbox_minimal',
    checkboxClass: 'icheckbox_square-red',
    //radioClass: 'iradio_minimal',
    radioClass: 'iradio_square',
    increaseArea: '20%' // optional
})
.val(this.val)
.trigger('ifChanged')
.on('ifChanged', (event)=>{

    // create a local copy so as not to modify the prop
    let value = [].concat(this.value)

    // check if the array includes the value already
    if(value.includes(this.val)){
        // if it does remove it
        value.splice(value.indexOf(this.val), 1)
    } else {
        // if it doesn't add it
        value.push(this.val)
    }
    // emit the entire array
    vm.$emit('input', value)
});

Answer 2

我明白了您尝试执行的操作，但这仅适用于本机复选框。如果v-model是一个数组，而元素是一个checkbox，它将把v-model更改为v-model="data[index]"之类的东西。如您尝试的那样，这不适用于自定义元素。

icheck-box组件中的v模型在vue中不起作用

2 个答案: