无法让 Vue 滑块工作

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 滑块工作

Can't get Vue slider work

slider

vue.js