Vue.js Quick Example

by cactus77kiki

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<style>
ul#menu li {
  display:inline;
}
</style>

<div id="demo" >
  <ul id="menu">
    <li v-for="mainCat in mainCategories">
      <input type="checkbox" :value="mainCat.merchantId" :id="mainCat.merchantId" v-model="checkedCategories" @click="check($event)"> {{mainCat.merchantId}}

    </li>
  </ul>
  {{ checkedCategories }}
  <label>{{ checkedCategories }}</label>
</div>

CSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
}

li.done {
  text-decoration: line-through;
}

/*ul#menu li {
　display: inline;
}*/

[v-cloak] {
  display: none;
}

JavaScript

var demo = new Vue({
  el: '#demo',
  data: {
    checkedCategories: [],
    mainCategories: [{
        merchantId: '1'
      }, {
        merchantId: '2'
      }] //testing with data use: [{done:false,content:'testing'}]
  },
  methods: {
    check: function(e) {
      if (e.target.checked) {
        console.log(e.target.value)
      }
    }
  }
})