Vue의 v-for 목록 항목에서 두 아이콘을 전환하는 방법

Vue의 v-for 목록 항목에서 두 아이콘을 전환하는 방법

전환하고 싶은 항목과 아이콘 목록이 있습니다.어떻게 하면 좋을까요?현재 클릭은 모든 항목에 적용됩니다.

<ion-item
        v-for="course in courses"
        :key="course.id">
  <ion-label class="ion-text-wrap">{{ course.name }}</ion-label>
  <span @click="toggleIcons">
    <ion-icon v-if="isSelected" :icon="ellipseOutline" slot="end"></ion-icon>
    <ion-icon v-else :icon="checkmarkCircleOutline" slot="end"></ion-icon>
  </span>
</ion-item>


///


data() {
    return {
        isSelected: false,
        }
    },
methods: {
    toggleIcons(){
        this.isSelected = !this.isSelected
    }
}

다음과 같은 스니펫을 사용해 보십시오.

new Vue({
  el: "#demo",
  data() {
      return {
        courses: [{id:1, name: 'aaa'}, {id:2, name: 'bbb'},{id:3, name: 'ccc'}],
        isSelected:  null
      }
    },
    methods: {
      toggleIcons(id){
        this.isSelected === id ? this.isSelected=null : this.isSelected = id
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="course in courses" :key="course.id">
    <label class="ion-text-wrap">{{ course.name }}</label>
    <button @click="toggleIcons(course.id)">
    click
      <div v-if="isSelected === course.id " slot="end">1</div>
      <div v-if="isSelected !== course.id " slot="end">2</div>
    </button>
  </div>
</div>

가장 좋은 방법은 인덱스를 유지하는 데이터 속성을 갖는 것입니다.course.id(고객님의 경우)의 '슬라이드' 버튼의

그리고 나서.@click을 설정하다course.id데이터 속성과 데이터 속성을 대조할 수 있습니다.course.id아이콘을 표시해 주세요.

아래 예를 확인하십시오.

데이터 속성

  data() {
    return {
      selectedCourseId: null,
    }
  },

설정하는 방법(또는 인라인 설정 가능)

  methods: {
    setSelectedCourseId(id) {
      this.selectedCourseId = id
    },
  }

템플릿

<ion-item v-for="course in courses" :key="course.id">
  <ion-label class="ion-text-wrap">{{ course.name }}</ion-label>
  <span @click="toggleIcons">
    <ion-icon v-if="selectedCourseId === course.id" :icon="ellipseOutline" slot="end"></ion-icon>
    <ion-icon v-else :icon="checkmarkCircleOutline" slot="end"></ion-icon>
  </span>
</ion-item>

언급URL : https://stackoverflow.com/questions/71031287/how-to-toggle-two-icons-in-v-for-list-item-in-vue