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

Question

我遇到了一个非常有趣的问题，我似乎无法全神贯注。

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

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

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

例子:

1. slider 的值为 3600(以秒为单位)。
2. 用户选择 hours从下拉列表中
3. 3600然后应更改为 1

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

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

编辑: CodePen

编辑 2:所以它似乎是一个computed属性(property)可能是我正在寻找的东西，但我无法终生让它发挥作用。我可能只是将这些绑定(bind)到我的输入的值移动到其他变量，并在提交表单时重新分配它们。

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

此外，您可能还想根据选定的转化缩放 slider 最大值:

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

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