Vue Change icon to click on the button

Question

how can I change the icon when I click on the button in vue. Here is a portion of the code:

<v-btn flat icon color="white">
   <v-icon>star_border</v-icon>
</v-btn>

Thanks

Answer 1

you can change button icon by use this code :

<button @click="isClicked = !isClicked">
         <i :class="isClicked ? 'mdi mdi-fullscreen-exit' : 'mdi mdi fullscreen'"></i>
 </button>

and add isClicked in data

 <script type="module">
    const app = Vue.createApp({
        data() {
            return {
                isClicked: false
            }
        },

    });app.mount('#app');
</script>

you can see working demo : change icon Demo