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?
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" }, ], }; }, {{ item.name }}
![[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.