Я столкнулся с довольно интересной проблемой, с которой я, похоже, не мог обернуть голову.
У меня есть форма, состоящая из нескольких <v-slider>
и <v-text-field>
s. для каждого атрибута объекта есть ползунок и текстовое поле, использующие его как свою v-модель следующим образом:
<v-slider v-model='object1.value'></v-slider>
<v-text-field v-model='object1.value'></v-text-field>
Проблема заключается в том, что эти поля (поскольку они извлекаются из базы данных) выходят за считанные секунды, что может быть обузой для пользователя при вводе значений, которые можно было бы легче представить в виде часов или минут. У меня есть <v-select>
который позволяет пользователю выбирать часы или минуты, однако я не могу понять, как изменить значение ползунков и текстовых полей, чтобы отобразить значение как часы.
Пример:
hours
из выпадающего списка3600
следует заменить на 1
Я попытался настроить наблюдателя на изменение выпадающего списка, которое последовательно возвращает NaN
при выполнении моей математики по заданным значениям.
У кого-нибудь есть идеи решить это?
EDIT: CodePen
EDIT 2: Таким образом, кажется, что computed
свойство может быть тем, что я ищу, однако я не могу за свою жизнь заставить его работать. Я могу просто переместить эти значения, привязанные к моим входам, к другим переменным и переназначить их при отправке формы.
Вы можете использовать вычисленное свойство, которое масштабирует исходное значение в соответствии с выбранной единицей времени. Основываясь на вашем оригинальном ручке, вот что вам нужно изменить:
В пункте выбора добавьте количество секунд для единицы времени как значение - это ваш коэффициент преобразования
<v-select
:items=[
{text: 'Seconds', value: 1},
{text: 'Minutes', value: 60},
{text: 'Hours', value: 3600}
]"
v-model="conversionFactor"
/>
вычисленное свойство делит на коэффициент преобразования на get и умножается на коэффициент при записи:
computed: {
convertedValue: {
get: function() {
return this.exObj.value / this.conversionFactor
},
set: function(newValue) {
this.exObj.value = newValue * this.conversionFactor
}
}
}
Кроме того, вы можете масштабировать максимальное значение ползунка на основе выбранного преобразования:
<v-slider
v-model="convertedValue" thumb-label
:max='9999 / conversionFactor'
:min='0'
/>