Vue.js 正在将vue 1迁移到vue 2

我有一个在Vue 1.x下运行良好的工作脚本，但是它在Vue 2.x下不工作，尽管我已经用挂载替换了ready

<div id="app">
    <div id="slider"></div>
    <input id="slider-input" v-model="third" v-on:change="updateSlider"/>
    <input id="slider-input" v-model="fourth" v-on:change="updateSlider"/>
</div>

---

现在我已经将ready替换为mounted，但它仍然不起作用。问题是，它甚至没有在控制台中发出错误消息。

我的猜测是，一旦Vue编译完完整模板并呈现自身（装载后），模板中的

将被另一个元素实例替换。我的意思是，在

mounted

hook中，

this.Slider

和

document.getElementById（'Slider'）

不再引用相同的元素（

this.Slider

从DOM中删除）

可能没有理由在

数据

块中定义

滑块

（它不需要是被动的），只需在

挂载的

钩子中初始化它即可：

mounted（）{
this.Slider=document.getElementById（'Slider'））
创建（this.Slider，…）
}

实际上，更好的方法是使用

ref

获取元素的实例，而不是查询DOM：

mounted（）{
noUiSlider.create（此.$refs.slider，…）
}

    var vue = new Vue({
  el: '#app',
  data: {
    first: 3,
    second: 2,
    third: 40,
    fourth: 60,
    slider: {
      min: 0,
      max: 100,
      start: [50, 60],
      step: 1
    },
    Slider: document.getElementById('slider')
  },
  computed: {
    total: function total() {
      return parseInt(this.first) * parseInt(this.second) * parseInt(this.third);
    }
  },
  methods: {
    updateSlider: function updateSlider() {
      this.Slider.noUiSlider.set(this.third);
    }
  },
  ready: function ready() {
    noUiSlider.create(this.Slider, {
      start: this.slider.start,
      step: this.slider.step,
      range: {
        'min': this.slider.min,
        'max': this.slider.max
      }
    });
  }
});