vue.js - 将 vue 1 迁移到 vue 2

问题描述

我有一个在 Vue 1.x 下运行良好的工作脚本，但它不适用于 Vue 2.x，即使我已将 ready 替换为 mount

<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>

Vue 1.x：

    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
      }
    });
  }
});

现在我已经用mounted替换了ready，它仍然无法正常工作。问题是，它甚至不会在控制台中吐出错误消息。

标签： vue.jsvuejs2nouislider

我的猜测是，<div id="slider">一旦 Vue 编译了完整的模板并呈现自身（安装后），模板中的就会被替换为不同的元素实例。我的意思是，在mounted钩子中，this.Slider不再document.getElementById('slider')引用同一个元素（this.Slider从 DOM 中移除）。

可能没有理由Slider在data块中定义（它不需要是反应性的），只需在mounted钩子中初始化它：

mounted() {
  this.Slider = document.getElementById('slider')
  noUiSlider.create(this.Slider, ...)
}

实际上，更好的方法是使用ref获取元素的实例而不是查询 DOM：

<div ref="slider"></div>

mounted() {
  noUiSlider.create(this.$refs.slider, ...)
}

vue.js - 将 vue 1 迁移到 vue 2

问题描述

解决方案

推荐阅读