如果单击按钮，则切换 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() 应该返回所有数据的值：

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

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

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