Vue kaydırıcıyı çalıştırılamıyor

Question

Min ve maksimum değer ayarlayabileceğim iki aralıklı kaydırıcıya ihtiyacım var. Bu kaynağı en az ve en yüksek değerlere sahip olduğu için karıştırıyorum kaynak, ama sadece bir hareket elemanı görüyorum.

Ancak, değişimin nasıl izleneceğini anlayamadığım sorun.

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: 
{ 

} 

}) 

} 

Ve HTML bölüm:

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

Ben http://jsfiddle.net/p5dox54w/ insert kodu denedim ama işe değil İşte benim kodudur. PC'mde, show slider var, ancak konsolda, pozisyonunu değiştirdiğimde herhangi bir değişiklik görmüyorum.

Answer 1

App'un değerini çocuk bileşenine iletmeniz ve .sync numaralı özelliğe eklemeniz gerekir; böylece bu, ana ile tekrar senkronize edilir.

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