javascript - 从两个不同的状态中选择一个选项

Question

我有两个单独states的：一个array和一个string。单击其中一个元素后，它会获得一个类highlight并变为selected. 如何显示selected：来自array或的项目string。

在这种情况下：我希望能够选择（单击后添加类突出显示）第 6 段。

这是一个小提琴。

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

li.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>6</p>

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

标签： javascriptvue.js

Answer 1

我希望您也想6在单击时显示...如果是这样，您可以分配与单击相同的数据类型{id: 6}。

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>