Question

我需要两个范围滑块，我可以设置最小值和最大值。我找到了这个slider

它让我迷惑，因为它有最小值和最大值，但是当我运行它时，我只看到一个运动元素。

但问题是我无法理解如何跟踪变化。这是我的代码：

Vue.component('com', {
    props: ['value'],
    template: `
            <div class="v-range-slider">
              <slot name="left"></slot>
              <input type="range" :value.sync="value" :min="min" :max="max" :step="step" :name="name">
              <slot name="right"></slot>
            </div>
            `
  })

App = new Vue ({ 
   el: '#app',
  data: 
    {
     value: 46
    },

  watch : 
  {
    value : function(value)
    {
        console.log(this.value);
    }
  },

methods:
{

}

})

}

和HTML部分：

<div id="app">
    <com></com>
    <p> Min value: {{value}}</p>
</div>

我尝试将代码插入http://jsfiddle.net/p5dox54w/，但它不起作用。在我的电脑上它显示滑块，但在控制台中，当我移动它的位置时，我看不到任何变化。

Answer 1

您需要将App的值传递给子组件，并将.sync添加到该属性，以便它将同步回父级。

<com :value.sync="value"></com>

无法使Vue滑块工作

1 个答案: