vue.js - vuetify v-slider Cannot get new position after click on slider

Question

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();
        }
    }, 

Answer 1

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>