vue.jsvuetify.jsv-slider

vuetify v-slider Cannot get new position after click on 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();
        }
    }, 

Solution

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

    Replace :v-model with v-model:

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

    should be

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