Vue3中使用rangeslider.js时@change事件无法触发如何解决？

问题原因 #

1. 原生input被替换：rangeslider.js会生成自定义的滑块DOM结构，原有的range input会被隐藏或移除，你绑定在原生input上的@change事件无法接收到用户操作触发的事件。
2. 事件机制不匹配：Vue的@change监听的是原生DOM的change事件，但rangeslider.js处理交互后，不会主动触发原生input的change事件，事件冒泡也会被插件的DOM结构阻断。
3. Angular与Vue的机制差异：AngularJS的ng-change是基于模型绑定的监听，只要ng-model的值更新就会触发；而Vue的@change是DOM事件驱动，两者触发逻辑完全不同，不能直接套用Angular的实现方式。

解决方案 #

方法1：监听rangeslider.js的自定义事件 #

在Vue的mounted钩子中初始化插件，并绑定它提供的专属事件：

mounted() {
  const sliderEl = document.getElementById('rating');
  
  // 初始化rangeslider插件
  $(sliderEl).rangeslider({
    // 这里可以添加插件配置项，比如外观、步长等
  });

  // 绑定插件的change事件，触发Vue方法
  $(sliderEl).on('change', (_, data) => {
    this.updateChart('rating', data.value);
  });
}

如果使用原生JS版本的rangeslider，事件绑定改为sliderEl.addEventListener('change', handler)即可。

方法2：结合v-model与watch监听 #

通过Vue的双向绑定同步滑块值，再监听值的变化：

<input
  type="range"
  min="0"
  max="10"
  name="rating"
  id="rating"
  step="1"
  data-ratingslider="true"
  v-model="sliderValue"
  autocomplete="off"
/>

data() {
  return {
    sliderValue: 0
  }
},
watch: {
  sliderValue(newVal) {
    // 值变化时触发业务逻辑
    this.updateChart('rating', newVal);
  }
},
mounted() {
  const sliderEl = document.getElementById('rating');
  
  $(sliderEl).rangeslider({
    // 初始化时同步插件与v-model的值
    onInit: function() {
      this.value = this.$element[0].value;
    }
  });

  // 插件滑动时同步值到v-model
  $(sliderEl).on('input', (_, data) => {
    this.sliderValue = data.value;
  });
}

内容的提问来源于stack exchange，提问作者rosudel