无法让 Vue 滑块工作答案

【问题标题】：Can't get Vue slider work无法让 Vue 滑块工作
【发布时间】：2016-03-21 05:44:02
【问题描述】：

我需要两个范围滑块，我可以在其中设置最小值和最大值。我找到了这个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/，但它不起作用。在我的电脑上它是显示滑块，但在控制台中，当我移动它的位置时，我看不到任何变化。

【问题讨论】：

标签： slider vue.js

【解决方案1】：

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

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

【讨论】：

我应该将它添加到com 标签还是我可以写：<input type="range" :value.sync="value" :min="min" :max="max" :step="step" :name="name">。在控制台之间我仍然看不到任何东西。我不能在我错的地方。在watch 或其他地方
它在这里工作：jsfiddle.net/p5dox54w/2。括号放错了，不知道是不是你的问题。至于评论，不，您仍然想使用v-model。 v-model 将输入同步到 value 变量，.sync 同步的子值备份到父项
谢谢！不，它正在工作！示例中的最小值和最大值是什么意思？
对不起，我把那些从你的原始代码留在了里面。你可以在这里看到一个例子：jsfiddle.net/p5dox54w/4 我也传入了其他变量，所以你可以自定义滑块
谢谢，但它看起来像最小值和最大值只是为了限制。我需要获得像refreshless.com/nouislider 这样的 2 个范围滑块的方法，用当前代码可以吗？