Vue select

by cs09g

HTML

<div id="vue">
  <h2>Option 1</h2> Only one can be selected
  <ul>
    <li v-for="item in items" :class="{highlight:item.id == selected}" @click="selected = item.id">{{item.id}}</li>
  </ul>
</div>

CSS

li.highlight {
  background: yellow;
}

h2 {
  margin-bottom: 0px;
}

JavaScript

var items = []
for (var i = 1; i <= 10; i++) {
  items.push({
    id: i
  })
}
new Vue({
  el: '#vue',
  data: {
    items,
    selected: undefined,
  }
})