Change image icon when active tab changes
P粉448130258
2023-08-29 18:55:29
<p>Currently I have a v-tab that has four tabs with image icons and text. However, when the tab is active, the active tab icon should change to another image. what should I do? </p>
<pre class="brush:php;toolbar:false;"><v-tabs v-model="tabs" class="tabs-menu">
<v-tab
v-for="item in items"
:key="item.id"
>
<img :src="item.icon" />
{{ item.name }}
</v-tab>
</v-tabs>
data() {
return {
tabs: null,
items: [
{ icon: "/planeInactive.svg", name: "plane" },
{ icon: "/hotelInactive.svg", name: "hotel" },
{ icon: "/planehotelInactive.svg", name: "plane hotel" },
{ icon: "/planeInactive.svg", name: "students" },
],
};
},</pre></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
v-modeland'tab'make the tab active by default. (I'm using the tab's name attribute inv-model, but you can use any unique attribute you want. )v-modelto check which tab is active and update the icon using conditional operators. (I used dummy icons, you can use yours. )In this demo, you should see that when the tab is active, a colored flight icon will be displayed, otherwise a black flight icon will be displayed.
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-main> <v-container> <v-tabs v-model="tab" > <v-tab v-for="(item, index) in items" :key="index" :href="`#${item.name}`" class="home-tabs" active-class="activeTab" > <img :src="tab == item.name ? item.icon : inactive_icon" /> {{ item.name }} </v-tab> </v-tabs> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <script> new Vue({ el: '#app', data () { return { tab: 'Flights', inactive_icon: 'https://www.svgrepo.com/show/413929/fly.svg', items: [ { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Flights" }, { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Hotels" }, { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Flights + Hotels" }, { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Students" }, ], } }, vuetify: new Vuetify(), }) </script> </body> </html> </html>