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

Question

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

我有一个由多个<v-slider>和<v-text-field>组成的表单。 对于对象的每个属性，都有一个滑块和文本字段，将其用作 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 。

有没有人有任何想法来解决这个问题？

编辑：代码笔

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

Answer 1

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

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

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

这是一支工作笔： https ://codepen.io/wwerner/pen/MXbyjL