Ползунок диапазона Vue.js, установите v-модель и получите изменения

Question

Я помещаю в веб-форму ползунок, чтобы пользователи могли указать, сколько они хотели бы оценить за определенную вещь.

Я использую Vue.js, и я не уверен, как настроить v-модель для этого и как получить введенное пользователем значение.

<div v-else class="form-group">
                                <form action="">
                                    <label for="formControlRange">Please drag the slider to decide how much you want to rate between 1 and 10</label>
                                    <input type="range" class="form-control-range" id="formControlRange">
                                </form>
<div>

Answer 1

Вам просто нужно добавить атрибут v-model для ввода диапазона:

<input type="range" class="form-control-range" id="formControlRange" v-model="value">

И определите value (как бы вы его ни называли) в своем компоненте.

...
data: {
  value: 50 //initial value
}

Пример: http://jsfiddle.net/q0Lmv196/