Изменить значение, отображаемое в v-слайдере и v-текстовом поле на основе опции v-select

1

Я столкнулся с довольно интересной проблемой, с которой я, похоже, не мог обернуть голову.

У меня есть форма, состоящая из нескольких <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> который позволяет пользователю выбирать часы или минуты, однако я не могу понять, как изменить значение ползунков и текстовых полей, чтобы отобразить значение как часы.

Пример:

  1. Значение ползунка равно 3600 (в секундах).
  2. Пользователь выбирает hours из выпадающего списка
  3. 3600 следует заменить на 1

Я попытался настроить наблюдателя на изменение выпадающего списка, которое последовательно возвращает NaN при выполнении моей математики по заданным значениям.

У кого-нибудь есть идеи решить это?

EDIT: CodePen

EDIT 2: Таким образом, кажется, что computed свойство может быть тем, что я ищу, однако я не могу за свою жизнь заставить его работать. Я могу просто переместить эти значения, привязанные к моим входам, к другим переменным и переназначить их при отправке формы.

  • 0
    У вас есть кодекс или что-то для работы?
  • 1
    @Toodoo Дай мне минуту, и я могу дать тебе пощечину, чтобы ты понял, что я пытаюсь сделать.
Показать ещё 4 комментария
Теги:
vue.js
vuetify.js

1 ответ

1
Лучший ответ

Вы можете использовать вычисленное свойство, которое масштабирует исходное значение в соответствии с выбранной единицей времени. Основываясь на вашем оригинальном ручке, вот что вам нужно изменить:

В пункте выбора добавьте количество секунд для единицы времени как значение - это ваш коэффициент преобразования

<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' 
/>

Здесь работает ручка: https://codepen.io/wwerner/pen/MXbyjL

Поделиться
  • 0
    Я пошел по другому пути, который может быть или не быть менее эффективным. Одна из проблем, с которыми я столкнулся, заключалась в том, что на странице несколько входов, и они не все используют одни и те же субблоки и могут даже не иметь субблоков. Однако этот ответ отвечает на мой вопрос, как опубликовано! Спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню