JSFiddle - React, Tailwind, and code Playground

by alexchetv

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="vue-instance">
  <ul>
    <li v-for="item in inventory" :class="{local:item.local}">
      {{ item.name }}
    </li>
  </ul>
  <button v-for="item in inventory" @click="toggle(item)">
  {{ item.name }}
  </button>
</div>

CSS

.local {
  color: red
}

JavaScript

var vm = new Vue({
  el: '#vue-instance',
  data: {
    inventory: [{
      name: 'MacBook Air',
      local: true
    }, {
      name: 'MacBook Pro',
      local: false
    }, {
      name: 'Lenovo W530',
      local: true
    }, {
      name: 'Acer Aspire One',
      local: false
    }]
  },
  methods:{
  toggle(item) {
  	item.local = !item.local
  }
  }
});