Question

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

我将这些值存储为我的Vue数据中的2个对象 - 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或其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数据设置最小最大值和步长值

1 个答案: