I am trying to execute a function when the v-slider is used (using dojo/on), but my approach doesn't work. Do you have any idea what I should change?

<div id="app">
  <v-app>
    <v-content>
      <v-container>
       <v-slider v-model="sliderValue"
                    id="sliderId"
                    v-on:input="sliderInput"
                    :max="2018"
                    :min="1990"
                    step="1"
                    thumb-label
                    ticks></v-slider>
      </v-container>
    </v-content>
  </v-app>
</div>


new Vue({
  el: '#app',
  data: () => ({
    sliderValue: 1990
  }),
  methods: {
    sliderInput (e) {
      this.sliderValue = e
      return this.sliderValue
    }
  },
  mounted  () {
    require(["dojo/on"], function(on){
      var slider = document.getElementById('sliderId')
      var vm = this
      function SomeFunction() {
        console.log('SomeFunction executed')
      }
      on(slider, 'change', function (event) {
        var xyz = vm.sliderValue
        SomeFunction(xyz)
      })
    })
   }
  })

I am trying to execute a function when the v-slider is used (using dojo/on), but my approach doesn't work. Do you have any idea what I should change?

https://codepen.io/hjmd/pen/bjGLoJ

<div id="app">
  <v-app>
    <v-content>
      <v-container>
       <v-slider v-model="sliderValue"
                    id="sliderId"
                    v-on:input="sliderInput"
                    :max="2018"
                    :min="1990"
                    step="1"
                    thumb-label
                    ticks></v-slider>
      </v-container>
    </v-content>
  </v-app>
</div>


new Vue({
  el: '#app',
  data: () => ({
    sliderValue: 1990
  }),
  methods: {
    sliderInput (e) {
      this.sliderValue = e
      return this.sliderValue
    }
  },
  mounted  () {
    require(["dojo/on"], function(on){
      var slider = document.getElementById('sliderId')
      var vm = this
      function SomeFunction() {
        console.log('SomeFunction executed')
      }
      on(slider, 'change', function (event) {
        var xyz = vm.sliderValue
        SomeFunction(xyz)
      })
    })
   }
  })

• javascript
• vue.js
• dojo
• vuetify.js

• Have you tried adding v-on:change attribute? I don't see the point of using dojo here – barbsan Commented Jul 11, 2018 at 7:11
• 1 Vuetify's v-slider has both @change and @input events. @change is normally triggered when the slider losses focus, whereas @input will trigger after the value changes. – Neil Merton Commented Jun 12, 2020 at 19:27
• 1 The codepen is missing. – mareoraft Commented Jun 12, 2020 at 20:44

3 Answers 3

I don't know if you have got the answer to it but if not, you can use: @change="function"

I have no idea how the vuetify library works neither the dojo, but I'm familiar with the VUE. The v-model is essentially syntax sugar for updating data on user input events, you could replace it with v-bind and v-on:input. So it's wrong you bind sliderInput with input event again.

In Vuetify 3 you need to use event "end" In your example it would be like this @end="sliderInput"