vuejs怎样实现列表中checkbox的双向绑定及初始化渲染?

如果只是分别实现双向绑定和初始化渲染,官网的例子都可以解决。
双向绑定可以绑定到同一个数组

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>

这样可以不做任何处理,获得所有checked的checkbox。

可是如果需要初始化渲染,一部分checkbox被预选中,v-model需要绑定一个boolen值checked:

<tr v-for="item in list">
    <td>
        <input type="checkbox" :value="item.value" v-model="item.checked" />
    </td>
</tr>

new Vue({
    el: 'body',
    data: {
        list: [{checked:true,value:'a'},{checked:false,value:'b'}]
    }
});

请问,如何既能保证初始化v-for时候渲染checkbox。又能方便快捷的获取所有选中的checkbox的值?

回答:

其實可以利用 filtermap 來輕鬆完成你要的功能

methods: {
    getChecked: function() {
        // 先透過 filter 篩選出 checked 為 true 的 item
        // 在透過 map 只回傳 item 的 value
        return this.list.filter(item => item.checked).map(item => item.value)
    }
}

實現

jsFiddle

回答:

你的需求不是vue就有实现吗?

<template>
  <div>
    <label for="jack">Jack</label>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    
    <label for="john">John</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    
    <label for="mike">Mike</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedNames: ["Jack", "John"]
    }
  },
  watch: {
    checkedNames(val) {
      console.log(val)
    }
  }
}
</script>

初始:

clipboard.png
点击Mike

clipboard.png

取消点击Mike

clipboard.png

回答:

我今天也遇到这个问题了,不过解决了,我用的是这个
:checked=”判断条件” v-model=”item.checked”
绝对可以哈~

回答:

或许你可以用下面的代码

$('input[type="checkbox"]').click()

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注