范围滑块 Nuxt JS - 编程之家

如何解决范围滑块 Nuxt JS

所以我有一个任务，我需要基于 Nuxt 中的范围滑块构建一个计算器，当拇指移动时它会改变颜色并同时计算一些东西。我已经设法让它在一定程度上工作。但是当我翻页时，它崩溃说无法读取未定义的addEventListener。

代码如下：

  <div class="range">
<input  v-html="amount" v-model="value" type="range" class="slider" id="amount"  min="0" max="100">
    </div>
     

methods: {
colorSlider(){
const slider = document.querySelector('#amount')
let x = slider.value 
let color = 'linear-gradient(90deg,rgb(249,84,78)' + x+ '%,rgb(224,224,224)' + x +'%)'
slider.style.background=color
}
},mounted(){
document.querySelector('#amount').addEventListener('mousemove',this.colorSlider)
}

有什么想法吗？

解决方法

您不需要事件侦听器——Vue 是响应式的，只需通过 v-model 将滑块绑定到数据属性即可。

例如：

...
<input type="range" v-model="sliderValue">
...

export default {
  data() {
    return {
      sliderValue: 0
    }
  }
}

现在当您调整滑块时，sliderValue 的值将更新。不需要事件监听器。

要将 sliderValue 的值用于模板中有用的内容 - 您应该使用计算属性，而不是方法。

export default {
  data() {
    return {
      sliderValue: 0
    }
  },computed: {
    sliderBgColor() {
      return `linear-gradient(90deg,rgb(249,84,78) ${this.sliderValue}%,rgb(224,224,224) ${this.sliderValue}%)`
    }
  }
}

现在，当您调整滑块时，它通过 v-model 绑定到 (sliderValue) 的数据属性将发生变化。计算属性 sliderBgColor 注意到变化并自动更新它的返回值。在输入中使用 sliderBgColor 的返回值，你就完成了。

<input type="range" v-model="sliderValue" :style="`background: ${sliderBgColor}`"

关于计算属性有很多可用的信息，我建议您查看 Vue 文档。