CODEWITHSUNDEEP
vue.jsvuetify.js
Pianoc
Pianoc

Reputation: 797

Toggle vuetify icon if button is clicked

I have a div where I want to toggle the icon if the button is clicked:

<div>
  <v-btn
    v-if="play"
    icon
    @click="true"
  >
    <v-icon>mdi-volume-off</v-icon>
  </v-btn>
  <v-btn
    v-else
    icon
    @click="false"
  >
    <v-icon>mdi-volume-high</v-icon>
  </v-btn>
</div>

In my data I have play set to false:

  data () {
    play: false
  }

What am I missing to toggle the icons on click?

Upvotes: 2

Views: 5050

Answers (1)

Noy Gafni
Noy Gafni

Reputation: 1201

You should do something like that:

<div>
  <v-btn
    icon
    @click="toggleIsPlaying"
  >
    <v-icon v-if="isPlaying">mdi-volume-off</v-icon>
    <v-icon v-else>mdi-volume-high</v-icon>
  </v-btn>
</div>

plus data() should return a value of all your data:

data () {
   return {
     isPlaying: false
   }
},

methods: {
   toggleIsPlaying() {
      this.isPlaying = !this.isPlaying;
   }
}

when you do @click="true" it doesn't do anything, you need to call a method of do some sort of action when the button is click, like changing isPlayign data for example.

Upvotes: 2

Related Questions