Vue.js 2.x.x + noUiSlider：生命周期和滑块创建

Question

我想要一个带有两个输入的双范围滑块来控制范围。

就像这个：https://i.stack.imgur.com/8w0UI.png

我还需要将其与 vue.js 一起获取。

我已经用 vue 1.0.19 完成了这个目标。

现在我想用 vue 2.5.13 来做，但根本行不通。

我认为这是因为我在 javaScript.

中有现成的方法

我已经尝试创建和安装但没有成功。

我的javascript：

    var vue = new Vue({
    el: '#main',
    data: {
        minRange: null,
        maxRange: null,
        slider: {
            startMin: 25,
            startMax: 75,
            min: 0,
            max: 100,
            start: 40,
            step: 1
        },
        Slider: document.getElementById('slider')
    },
    methods: {
        updateSlider: function updateSlider() {
            this.Slider.noUiSlider.set([this.minRange, this.maxRange]);
        }
    },
    ready: function ready() {
        noUiSlider.create(this.Slider, {
            start: [this.slider.startMin, this.slider.startMax],
            step: this.slider.step,
            range: {
                'min': this.slider.min,
                'max': this.slider.max
            }
        });
    }
});

vue.$data.Slider.noUiSlider.on('update', function(values, handle) {
    vue.$data[handle ? 'maxRange' : 'minRange'] = values[handle];
});

我的html:

<div id="main">
        <br>
        <div id="slider"></div>
        <br>
        <input id="slider-input" v-model="minRange" v-on:change="updateSlider" />
        <input id="slider-input" v-model="maxRange" v-on:change="updateSlider" />
    </div>

Answer 1

不要使用 vue.$data.{data} 立即访问数据。使用 vue.{data}，并使用 refs 在 vue 中访问 dom，这里是一个工作示例

var vue = new Vue({
  el: '#main',
  data: {
    minRange: null,
    maxRange: null,
    slider: {
      startMin: 25,
      startMax: 75,
      min: 0,
      max: 100,
      start: 40,
      step: 1
    }        
  },
  methods: {
    updateSlider: function updateSlider() {
      this.$refs.slider.noUiSlider.set([this.minRange, this.maxRange]);
    }
  },
  mounted: function() {
    noUiSlider.create(this.$refs.slider, {
      start: [this.slider.startMin, this.slider.startMax],
      step: this.slider.step,
      range: {
        'min': this.slider.min,
        'max': this.slider.max
      }
    }); 
            
    this.$refs.slider.noUiSlider.on('update',(values, handle) => {
      this[handle ? 'maxRange' : 'minRange'] = parseInt(values[handle]);
    }); 
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>

<div id="main">
  <br>
  <div id="slider" ref="slider"></div>
  <br>
  <input v-model="minRange" v-on:change="updateSlider" />
        
  <input v-model="maxRange" v-on:change="updateSlider" />
  </div>

Vue.js 2.x.x + noUiSlider：生命周期和滑块创建

Vue.js 2.x.x + noUiSlider: lifecycle and slider creation

javascript

nouislider

vue.js