根据 v-select 选项更改显示在 v-slider 和 v-text-field 中的值

Question

我运行遇到了一个非常有趣的问题，我似乎无法解决这个问题。

我有一个由多个 <v-slider> 和 <v-text-field> 组成的表单。对于对象的每个属性，都有一个滑块和文本字段使用它作为它们的 v 模型，如下所示：

<v-slider v-model='object1.value'></v-slider>
<v-text-field v-model='object1.value'></v-text-field>

问题是这些字段（因为它们是从数据库中检索到的）会在几秒钟内出现，当用户输入可以更容易地表示为小时或分钟的值时，这可能会给用户带来负担。我有一个 <v-select> 允许用户 select 小时或分钟，但是我不知道如何更改滑块和文本字段的值以将值显示为小时。

示例：

滑块的值为 3600（以秒为单位）。
下拉列表中的用户 selects hours
3600 应改为 1

我已经尝试在下拉列表中设置一个观察者，在对提供的值进行数学运算时，它始终 returns NaN。

有没有人有解决这个问题的想法？

编辑： CodePen

编辑 2：所以看起来 computed 属性可能是我正在寻找的东西，但是我终生无法让它工作。我可能只是将这些绑定到我的输入的值移动到其他变量，并在提交表单时重新分配它们。

Answer 1

您可以使用 computed property 根据 selected 时间单位缩放原始值。根据您原来的笔，以下是您需要更改的内容：

在 select 中，添加时间单位的秒数作为值 - 这是您的转换系数

<v-select 
  :items=[
    {text: 'Seconds', value: 1},
    {text: 'Minutes', value: 60},
    {text: 'Hours', value: 3600}
  ]" 
  v-model="conversionFactor"
/>

计算的属性在获取时除以转换因子并乘以写入时的因子：

computed: {
  convertedValue: {
    get: function() {
      return this.exObj.value / this.conversionFactor
    },
    set: function(newValue) {
      this.exObj.value = newValue * this.conversionFactor
    }
  }
}

此外，您可能还想根据 selected 转换缩放滑块最大值：

<v-slider 
  v-model="convertedValue" thumb-label
  :max='9999 / conversionFactor'
  :min='0' 
/>

这是一个working pen: https://codepen.io/wwerner/pen/MXbyjL

根据 v-select 选项更改显示在 v-slider 和 v-text-field 中的值

Change Value Displayed in v-slider and v-text-field based on a v-select option

javascript

vue.js

vuetify.js