vuetify v-slider 单击滑块后无法获得新位置 [英] vuetify v-slider Cannot get new position after click on slider

问题描述

在我的 AudioPlayer 组件中，我有一个 v-slider更改滑动位置后我无法获得值;-)

In my AudioPlayer component, I have a v-slider I cannot get the value after cha,ging the slide position ;-)

      <v-slider @change="setPosition()" :value="trackProgress" :v-model="percentage" thumb-label></v-slider>


    data() {
      return {
        percentage: 0
      };
    },
    computed: {
        trackProgress: function() {
          return this.progress * 100;
        }
      },
    methods: {
        setPosition() {
          console.log("SET POSITION: ", this.percentage); // always 0 !!!
          // this.setProgress(this.percentage / 100);
          // this.togglePlayback();
        }
    }, 

推荐答案

您在 v-model 属性上使用了 :，这让 Vue 认为它是一个绑定名为v-model"的 prop，而不是 v-model 本身.

You're using : on the v-model-attribute, which lets Vue think it's a binded prop with the name "v-model", rather than the v-model itself.

将 :v-model 替换为 v-model:

<v-slider @change="setPosition()" :value="trackProgress" :v-model="percentage" thumb-label></v-slider>

应该

<v-slider @change="setPosition()" :value="trackProgress" v-model="percentage" thumb-label></v-slider>

这篇关于vuetify v-slider 单击滑块后无法获得新位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！