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

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

enter image description here

Я использую 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>
2
0
6 304
1

Ответы 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/

здорово, вы можете помочь мне отобразить числа на слайдере для пользователя?

user9307178 10.09.2018 20:59

Видимо есть возможность добавлять метки / метки к ползунку диапазона. Но в настоящее время ни один браузер не поддерживает эту функцию: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… Возможно, вам придется искать альтернативу (сторонний компонент - например, этот: npmjs.com/package/bootstrap-slider)

Jns 10.09.2018 21:55

но я не могу показать на дисплее хотя бы `<h1> {{value}} </h1>`.

user9307178 10.09.2018 22:59

Хорошо, я неправильно понял это

Jns 11.09.2018 08:25

Нет, это все еще было полезно, потому что я надеялся, что смогу добавить более приятный интерфейс на слайдер.

user9307178 11.09.2018 19:53

Другие вопросы по теме