如何在 vue .js 上创建具有相同值的复选框

Question

how do I make one of the check boxes true does not all go true, this is how the checkbox has the same value, if I am true all of them do not follow true its myCode

 <section id="app">
<table>
<tr>
    <td> <input type="checkbox" true-value="1" false-value="0" v-model="ai"></td>
    <td> <input type="checkbox" true-value="1" false-value="0" v-model="ai"></td>
    <td> <input type="checkbox" true-value="1" false-value="0" v-model="ai"></td>
    <td> <input type="checkbox" true-value="1" false-value="0" v-model="ai"></td>
    <td> <input type="checkbox" true-value="1" false-value="0" v-model="ai"></td>
    <td>{{ai}}</td>
</tr>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
   const app = new Vue({
     el: '#app',
    data: {
          ai: ''
        }
    })
</script>

Answer 1

You need to change ai: '' to ai: []

From

data: {
  ai: ''
}

to

data: {
  ai: []
}

You can see the example in the documentation ,