Broken Q-Slider

[julioferraz]

Hi! The Slider seems to have some bug. The first time the Onreset method is rendered, it works, but when I change the value of the slide again it does not work. The following error appears:

[Vue warn]: Error in v-on handler: “TypeError: $event.target is undefined”

https://codepen.io/julioferraz/pen/VOBwmy

<div class="text-h5" align="center">Test Slider</div>
<br>
<div align="center" id="q-app">
      
   <custom-slider v-model="val1"> </custom-slider>
   <q-btn v-on:click="onReset" label="Reset" color="red" />
   
</div>

Vue.component('custom-slider', {
  props: ['value'],
  template: `
    <q-slider
      v-model="value"
      :min= 0
      :max= 100
      label
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    />
  `
})

new Vue({
  el: '#q-app',
  data: function () {
    return {
     val1: 75
    }
  },
    methods: {
    onReset() {this.val1 = 25}
    }
})

Translated automatically

[rstoenescu]

@input="val => { this.$emit('input', val) }" instead of v-on:input="$emit('input', $event.target.value)"
You’re using a Vue component, not a native component.

[julioferraz]

@rstoenescu Worked, thank you! But I did not quite understand. The “q-slider” is not native?

Automatically translated

[metalsadman]

@julioferraz said in Broken Q-Slider:

@rstoenescu Worked, thank you! But I did not quite understand. The “q-slider” is not native?

Automatically translated

no it’s not, it’s a quasar component. you can also remove the v:bind part of your code, as you’ve already passed the value in your v-model.

[julioferraz]

@metalsadman Of course. I understand. Thank you!