如果单击按钮，则切换 vuetify 图标

Question

我有一个 div 如果单击按钮我想在其中切换图标：

<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>

在我的数据中，我将 play 设置为 false：

  data () {
    play: false
  }

点击时切换图标我错过了什么？

Answer 1

你应该这样做：

<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>

加上 data() 应该 return 您所有数据的值：

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

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

当您执行 @click="true" 时它不会执行任何操作，您需要在单击按钮时调用执行某种操作的方法，例如更改 isPlayign 数据。

如果单击按钮，则切换 vuetify 图标

Toggle vuetify icon if button is clicked

vue.js

vuetify.js