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

Question

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

我有一个包含多个<v-slider>s 和<v-text-field>s 的表单。对于对象的每个属性，都有一个滑块和文本字段，将其用作 v-model，如下所示：

<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。

有没有人有办法解决这个问题？

编辑： CodePen

编辑 2： 因此，似乎computed 属性可能是我正在寻找的，但是我一辈子都无法让它发挥作用。我可能只是将这些绑定到我的输入的值移动到其他变量并在表单提交时重新分配它们。

Answer 1

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

在选择中，添加时间单位的秒数作为值 - 这是您的转换因子

<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
    }
  }
}

此外，您可能还希望根据所选转化来缩放滑块最大值：

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

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