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

【问题标题】：Vue.js + Vuetify Slider - Set min max and step values from Vue dataVue.js + Vuetify Slider - 从 Vue 数据中设置最小最大值和步长值
【发布时间】：2018-02-24 23:42:20
【问题描述】：

我的应用程序需要大约。要提交的 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

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

【问题讨论】：

标签： html vue.js vuejs2 vuetify.js

【解决方案1】：

要将属性绑定到组件，use v-bind，或其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 也可以这样做。

【讨论】：