CODEWITHSUNDEEP
htmlvue.jsvuejs2vuetify.js
James Webb
James Webb

Reputation: 189

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

My application requires approx. 20 paremeters to be submitted, most of these are numbers so I would like to use sliders with the preset value, min, max and steps being loaded in from somewhere else.

I'm storing these values as 2 objects in my Vue data - SimulationParameters and SimulationParametersConfig. So I have been able to get values out using something like:

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

I have been using Vuetify's v-slider like so:

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

But now I want to be able to set the min, max and step values to those loaded in SimulationParametersConfig. I have tried the follwing variants:

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

Is this possible to do this way? Or would it need to be done by a script?

Upvotes: 0

Views: 4059

Answers (1)

acdcjunior
acdcjunior

Reputation: 135792

To bind properties to components, use v-bind, or its shorthand :.

So, to bind step to SimulationParametersConfig.param1.step, you would change:

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

To:

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

Naturally, the same could be done to min and max as well.

Upvotes: 1

Related Questions