Kann Vue Schieberegler Arbeit nicht

Question

Ich brauche zwei Bereich Schieberegler, wo ich min und max Wert einstellen kann. Ich fand das slider

Es Quelle verwechseln mich, weil es Min- und Max-Werte haben, aber wenn ich es laufe sehe ich nur ein Bewegungselement.

Aber Problem, das ich nicht verstehen kann, wie man Änderungen verfolgt. Hier ist mein Code:

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

} 

}) 

} 

und HTML-Teil:

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

Ich versuchte Insert Code http://jsfiddle.net/p5dox54w/ aber es funktioniert nicht. Auf meinem PC ist es Show-Slider, aber in der Konsole sehe ich keine Änderungen, wenn ich seine Position verschiebe.

Answer 1

Sie müssen den Wert App in die untergeordnete Komponente eingeben und der Eigenschaft .sync hinzufügen, damit sie wieder mit dem übergeordneten Objekt synchronisiert wird.

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