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

Answer 2

Hi Enzo and congrats on starting your VueJS project.

I would recommend you looking at VueJS documentation about Data and Methods, to give you some start. https://v2.vuejs.org/v2/guide/instance.html#Data-and-Methods

In short Data is where you keep your reactive properties and Methods store your functionality.

Right now the name of the icon is hard-coded. What you want to do is to make it reactive. So to change the icon;.

1. You need to bind the name of the icon to a property in your data.
2. Define a method that changes the value of that property.
3. Make an on-click event to invoke a function.

Something like this:

new Vue({
  el: '#app',
  data() {
    return {
      myIcon: 'star_border'
    }
  },
  methods: {
    changeIcon() {
      this.myIcon = 'home'
    }
  }
})

Here I've defined a property called myIcon, which is 'star-border' at first. I've also created a method that gets invoked on the click-event of this button. This method changes the value of the myIcon property to 'home'.

You can see a working demo here: https://codepen.io/bergur/pen/MLMxzY

Answer 3

<v-btn @click="show = !show" icon>
    <v-icon>{{ !show ? 'mdi-eye' : 'mdi-close' }}</v-icon>
</v-btn>

add to component

{
    data(){ 
        return {
            show:false
        }
    }
}