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>允许用户选择小时或分钟，但我无法弄清楚如何更改滑块和文本字段的值以将值显示为小时。

示例：

滑块的值为3600（以秒为单位）。
用户从下拉列表中选择hours
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"
/>

计算属性除以get上的转换因子，并乘以write上的因子：

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

更改值基于v-select选项在v-slider和v-text-field中显示

1 个答案: