활성 탭이 변경되면 이미지 아이콘 변경

Question

현재 이미지 아이콘과 텍스트가 포함된 4개의 탭이 있는 v-tab이 있습니다. 그러나 탭이 활성화되면 활성 탭 아이콘이 다른 이미지로 변경되어야 합니다. 어떻게 해야 합니까?

<v-tabs v-model="tabs" class="tabs-menu">
    <v-탭
      v-for="항목 내 항목"
      :key="item.id"
    >
      <img :src="item.icon"
        {{ 상품명 }}
    </v-tab>
</v-탭>

데이터() {
    반품 {
      탭: null,
      항목: [
        { 아이콘: "/planeInactive.svg", 이름: "평면" },
        { 아이콘: "/hotelInactive.svg", 이름: "호텔"
        { 아이콘: "/planehotelInactive.svg", 이름: "비행기 + 호텔" },
        { 아이콘: "/planeInactive.svg", 이름: "학생" },
      ],
    };
  },

Answer 1

1. v-model 使用一些默认值，'tab' 使选项卡默认处于活动状态。 （我在 v-model 탭의 이름 속성을 사용하세요. 그러나 원하는 고유 속성을 사용할 수 있습니다. )
2. 이것을 사용하여 v-model 활성화된 탭을 확인하고 조건 연산자를 사용하여 아이콘을 업데이트하세요. (저는 더미 아이콘을 사용했습니다. 여러분의 아이콘을 사용해도 됩니다. )

이 데모에서는 탭이 활성화되면 색상이 있는 비행 아이콘이 표시되고, 그렇지 않으면 검은색 비행 아이콘이 표시되는 것을 볼 수 있습니다.

으아악