Vue with checkBox
HTML
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<div v-for="category in categories">
<input type="checkbox" v-model="item.category" :id="'category_' + category.id" :value="category.id" />
<!-- <label>{{ item.category }} : {{ category.id }}</label> -->
</div>
</div>
JavaScript
var demo = new Vue({
el: '#demo',
data() {
return {
categories: [{
"id": 2,
"name": "news Category 0"
}, {
"id": 7,
"name": "news Category 1"
}, {
"id": 1,
"name": "news Category 2"
}, {
"id": 17,
"name": "news Category 3"
}, {
"id": 22,
"name": "news Category 4"
}, {
"id": 27,
"name": "news Category 5"
}, {
"id": 32,
"name": "news Category 6"
}, {
"id": 37,
"name": "news Category 7"
}, {
"id": 42,
"name": "news Category 8"
}, {
"id": 47,
"name": "news Category 9"
}, {
"id": 52,
"name": "news Category 0"
}, {
"id": 57,
"name": "news Category 1"
}, {
"id": 62,
"name": "news Category 2"
}, {
"id": 67,
"name": "news Category 3"
}, {
"id": 72,
"name": "news Category 4"
}, {
"id": 77,
"name": "news Category 5"
}, {
"id": 82,
"name": "news Category 6"
}, {
"id": 87,
"name": "news Category 7"
}, {
"id": 92,
"name": "news Category 8"
}, {
"id": 97,
"name": "news Category 9"
}],
item: {
category: [1]
}
};
}
})