アクティブなタブが変更されると画像アイコンが変更されます

Question

<p>現在、画像アイコンとテキストを含む 4 つのタブがある v-tab を持っています。ただし、タブがアクティブな場合は、アクティブなタブのアイコンが別の画像に変わるはずです。どうすればいいですか？ </p> <pre class="brush:php;toolbar:false;"><v-tabs v-model="tabs" class="tabs-menu"> <img :src="アイテム.アイコン" /> {{ 項目名 }} </v-tab> </v-tabs> データ（） { 戻る { タブ: null、 アイテム: [ { アイコン: "/planeInactive.svg"、名前: "飛行機" }、 { アイコン: "/hotelInactive.svg"、名前: "ホテル" }、 { アイコン: "/planehotelInactive.svg"、名前: "プレーン ホテル" }、 { アイコン: "/planeInactive.svg"、名前: "学生" }、 ]、 }; },</pre></p>

Answer 1

1. v-model と 'tab' にいくつかのデフォルト値を使用すると、デフォルトでタブがアクティブになります。 (ここでは v-model でタブの name 属性を使用していますが、任意の一意の属性を使用できます。 )
この
2. v-model を使用して、アクティブなタブを確認し、条件演算子を使用してアイコンを更新します。 (私はダミーのアイコンを使用しましたが、自分のアイコンを使用できます。)

このデモでは、タブがアクティブな場合は色付きのフライト アイコンが表示され、それ以外の場合は黒いフライト アイコンが表示されることがわかります。

リーリー