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'},
      ]
    }
  }

我添加了一张包含当前应用程序的图片以及我想要实现的目标。

提前致谢！ Image with application and some comments

Answer 1

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

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

＆＃13;

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;
     }
   }
})

＆＃13;

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;
}

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<main id="app">
    <div class="list-group" 
    v-if="showPlaces == false">
        <a href="#" 
          class="list-group-item list-group-item-action"
          @click="updateSelected(place)"
          v-for="(place,index) in places"
          :key="index">
              {{place.number}}
        </a>
    </div>

    <div v-else> 
        <button class="btn btn-primary"
        @click="showPlaces = false">
            Go back
        </button>
            <p>You have choosen 
              <span class="highlight">{{this.selectedPlace.number}}</span>
            </p>
      </div>
</main>

＆＃13;

Answer 2

您必须创建method和var来处理此问题。

new Vue({
  el: '#app',
  data() {
    return {
      showPlaces: false,
      selectedPlace: null,
      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'
        },
      ]
    }
  },
  methods: {
    clickedPlace() {
      this.showPlaces = true
      this.selectedPlace = event.target.innerHTML
    }
  }
})

a {
  display: block;
}

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <div class="list-group" v-if="showPlaces == false">
    <a href="#" @click="clickedPlace()" :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>  {{ selectedPlace }}
  </div>
</div>

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

2 个答案: