Question

我有一个可以在Vue 1.x下正常运行的工作脚本但是它不能与Vue 2.x一起工作，即使我已经用挂载替换了就绪

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

现在我已经用挂载替换了 ready ，但它仍然无效。问题是，它甚至不会在控制台中吐出错误信息。

Answer 1

我的猜测是，一旦Vue编译完整模板并自行渲染（安装后），模板中的<div id="slider">将被替换为不同的元素实例。我的意思是，在mounted挂钩中，this.Slider和document.getElementById('slider')不再引用相同的元素（this.Slider已从DOM中移除。）

可能没有理由在Slider块中定义data（它不需要被动反应），只需在mounted挂钩中初始化mounted() { this.Slider = document.getElementById('slider') noUiSlider.create(this.Slider, ...) }代替：

ref

实际上，更好的方法是使用<div ref="slider"></div>来获取元素的实例而不是查询DOM：

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

Foo

将vue 1迁移到vue 2

1 个答案: