Vue.js + Vuetify Slider - 从 Vue 数据设置最小最大值和步长值

Question

我的申请需要大约。要提交的 20 个参数，其中大部分是数字，所以我想使用从其他地方加载的预设 value、min、max 和 steps 的滑块.

我将这些值作为 2 个对象存储在我的 Vue 数据中 - SimulationParameters 和 SimulationParametersConfig。所以我已经能够使用类似的东西来获取价值：

<p> {{SimulationParameters.parameter1}} </p>

我一直在像这样使用 Vuetify 的 v-slider：

<v-slider class="customSlider" id="param1Slider"
    v-model="SimulationParameters.param1" 
    step="1" 
    min="0" 
    max="100">
</v-slider>

但现在我希望能够将 min、max 和 step 值设置为 SimulationParametersConfig 中加载的值。我尝试了以下变体：

step="SimulationParametersConfig.param1.step"
//takes it as a string - param1 = Nan

...

step={{SimulationParametersConfig.param1.step"}}
//failed to compile

...

step=SimulationParametersConfig.param1.step
//not sure but doesn't work

这样可以吗？还是需要通过脚本来完成？

Answer 1

要将属性绑定到组件，use v-bind, or its shorthand :。

因此，要将 step 绑定到 SimulationParametersConfig.param1.step，您需要更改：

<v-slider class="customSlider" id="param1Slider"
    v-model="SimulationParameters.param1" 
    step="1" 
    min="0" 
    max="100">
</v-slider>

收件人：

<v-slider class="customSlider" id="param1Slider"
    v-model="SimulationParameters.param1" 
    :step="SimulationParametersConfig.param1.step" 
    min="0" 
    max="100">
</v-slider>

当然，也可以对 min 和 max 做同样的事情。

Vue.js + Vuetify Slider - 从 Vue 数据设置最小最大值和步长值

Vue.js + Vuetify Slider - Set min max and step values from Vue data

html

vue.js

vuejs2

vuetify.js