v-for, 클릭된 목록 항목을 여는 방법

v-for, 클릭된 목록 항목을 여는 방법

저는 Vue에 문제가 있어서 구글/스택오버플로우에서 답을 찾느라 많은 시간을 보냈습니다.이 글을 올리기 전에 아마 제 문제를 어떻게 말로 설명해야 할지 모르겠습니다.

코드는 다음과 같습니다.

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

저는 현재 어플리케이션과 제가 이루고 싶은 것을 담은 사진을 추가했습니다.

잘 부탁드립니다!어플리케이션과 코멘트가 있는 이미지

선택한 항목을 추적하려면 내부 상태를 유지해야 합니다.이렇게 바인딩된 클릭 핸들러에 각 v-for 단계의 반복 개체를 쉽게 전달할 수 있습니다.

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

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


  

작성해야 합니다.method및 avar이 일을 처리할 수 있습니다.

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>

언급URL : https://stackoverflow.com/questions/49755643/v-for-how-to-open-clicked-list-item