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

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

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

Я использую 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>
JS - События опций формы
JS - События опций формы
В продолжение предыдущей статьи CSS - стили, связанные с вводом формы , в этой статье мы будем использовать JS для взаимодействия с формами, на этот...
CSS - Стили, связанные с вводом формы
CSS - Стили, связанные с вводом формы
Общими стилями ввода для форм являются Input (включая Text, Radio, checkbox), Select и Textarea, из которых Input относительно прост, поэтому в этой...
Создание многостраничной формы заявления о приеме на работу с помощью Angular
Создание многостраничной формы заявления о приеме на работу с помощью Angular
Наличие на корпоративном сайте форм заявлений о приеме на работу, или "трудовых анкет", экономит время и деньги как для соискателей, так и для...
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

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