は私が最小値と最大値を設定することができる2つの範囲スライダを、必要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/への挿入コードを試してみましたが、それは動作していません。私のPC上では、それはショースライダーですが、コンソールでは、私がその位置を動かすときに私は何の変化も見ません。

Answer 1

子コンポーネントにAppの値を渡し、親に同期を戻すように.syncをプロパティに追加する必要があります。

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