Vue

by joplomacedo

HTML

<div id="app">
  <div class="toggle__list">
  
      <label class="toggle__item" :class="selected.includes(i) && 'is-selected'" v-model="selected" v-for="i in 20">
        <input type="radio" class="toggle__radio "/>
        
        <span class="toggle__toggle">
          <span class="toggle_content">{{i}}</span>
        </span>
        
      </label>
  </div>
</div>

CSS

.toggle__list {
   display: flex;
}

.toggle__toggle_radio {
  display: none;
}


.toggle__toggle {
  padding: .5em;
  border: 1px solid #eee;
  margin-right: -1px;
}

:checked ~.toggle__toggle {
  background-color: #eee;
}

Vue

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 }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})