Vue checkbox綁定範例

radio button with checkbox,v-model=array資料

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
  <input type="checkbox" id="chk_A" value="A" v-model="arry">
  <label for="chk_A">A</label>
  <input type="checkbox" id="chk_B" value="B" v-model="arry">
  <label for="chk_B">B</label>
  <input type="checkbox" id="chk_C" value="C" v-model="arry">
  <label for="chk_C">C</label>
  <input type="checkbox" id="chk_D" value="D" v-model="arry">
  <label for="chk_D">D</label>
  {{arry}}
  <br/>
</div>

JavaScript

/*
ref:https://jsfiddle.net/cactus77kiki/tuno8hgk/2/
*/
new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ],
    arry:['A','C','D']
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})