若单击按钮，则切换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>

在我的数据中，我的播放设置为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数据。