Question

刚开始学习vue.js，遇到这样的问题，我有多个checkbox有的值相同，结果相同值的checkbox同时被勾选，怎么会出现这个问题解决了吗？

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="Jack" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

</div>

Answer 1

试试这个：

{"body": "$input.body"}

const app = new Vue({ 
  el: '#app', 
  data: () => ({ checkedNames:[] }),
  computed: { 
    names: function() { return this.checkedNames.filter(e => e !== false); } 
  }
});

如何防止使用 Vue.js 检查相同值的复选框？

1 个答案: