[Vuejs]-Selecting an option from two separate states

by

2👍

✅

I hope you want to display 6 also when click … If so you can assign same data type like {id: 6} on click .

var items = []
for (var i = 1; i <= 5; i++) {
  items.push({
    id: i
  })
}
new Vue({
  el: "#app",
  data: {
    items,
    selected: undefined,
  },
  methods: {}
})
.highlight {
  background: yellow;
}

p,
h1 {
  margin-top: 20px;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <ul>
    <li v-for="item in items" :class="{highlight:item == selected}" @click="selected = item">{{item.id}}</li>
  </ul>
  <p :class="{highlight: selected && selected.id === 6}" @click="selected = {id: 6}">6</p>

  <h1>Selected item: {{ this.selected }}</h1>
</div>
👤Jack jdeoel

Leave a comment