v-for，如何打开点击的列表项

Question

我在使用 Vue 时遇到了问题，我花了很多时间，在发布之前尝试在 google/stackoverflow 中找到答案，可能我不知道如何用文字解释我的问题。

这是代码：

  <div class="list-group" v-if="showPlaces == false">
    <a href="#" @click="showPlaces = true" :key="place.id" v-for="place in places" class="list-group-item list-group-item-action">{{place.number}}</a>
  </div>

  <div v-else>
    <button @click="showPlaces = false" class="btn btn-primary">Go back</button>
    {{this.places.number}}asd
  </div>


  data() {
    return {
      showPlaces: false,
      places: [
        {number: 'First Place'},
        {number: 'Second Place'},
        {number: 'Third Place'},
        {number: 'Fourth Place'},
        {number: 'Fifth Place'},
        {number: 'Sixth Place'},
        {number: 'Seventh Place'},
        {number: 'Eighth Place'},
        {number: 'Ninth Place'},
        {number: 'Tenth Place'},
      ]
    }
  }

我已经添加了当前应用程序的图片以及我想要实现的目标。

提前致谢！ 带有应用程序和一些注释的图像

Answer 1

您需要维护内部状态以跟踪所选项目。您可以轻松地将每个 v-for 步骤中的迭代对象传递给绑定到它的单击处理程序，如下所示，

v-for="(place, index) in places" @click="updateSelected(place)"

v-for="(place, index) in places" @click="updateSelected(place)"

const app = new Vue({
  el: '#app',
  data: {
      showPlaces: false,
      places: [
        {number: 'First Place'},
        {number: 'Second Place'},
        {number: 'Third Place'},
        {number: 'Fourth Place'},
        {number: 'Fifth Place'},
        {number: 'Sixth Place'},
        {number: 'Seventh Place'},
        {number: 'Eighth Place'},
        {number: 'Ninth Place'},
        {number: 'Tenth Place'},
      ],
      selectedPlace: {}
    },
  methods: {
    
    /**
    * update state to maintain selected item
    * and toggle view
    */
    updateSelected (selectedItem) {
        this.selectedPlace = selectedItem;
        this.showPlaces = true;
     }
   }
})

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 12px
}

.list-group-item {
  display: block;
  text-decoration: none;
  margin: 1em 0.2em;
  color: #4a4a4a;
}

.list-group-item:hover {
  color: red;
}

.highlight {
  color: blue;
}