vue - passing props from object to component

Question

I need to pass some props to a component, I have the props in an object and I want to do something like this:

<v-btn 
  btn.size.sm 
  btn.size.md 
  btn.size.lg
>
{{ btn.text }}
</v-btn>

Where my btn object looks like this:

btn = {
  text:"Click me",
  size:{
    sm:"sm-12",
    md:"md-6",
    lg:"lg-4"
  }
}

the resulting component would then be equivalent to writing:

<v-btn 
  sm-12
  md-6
  lg-4
>
{{ btn.text }}
</v-btn>

Is this even possible? The only way I can think to do this at the moment is to have a prop for every size variation and then conditionally set it to true or false. but that seems like such overkill. Anyone got any ideas?

FYI - I'm using Vuetify if that makes any difference

Psidom Psidom · Accepted Answer · 2018-10-30T02:59:49

Make your btn object like so:

btn = {
  text:"Click me",
  size:{
    "sm12": true,
    "md6": true,
    "lg4": true
  }
}

Then you can use v-bind syntax to create the attributes:

<v-btn v-bind="btn.size">
  {{ btn.text }}
</v-btn>

Or if you can't change the btn object:

btn = {
  text:"Click me",
  size:{
    sm:"sm12",
    md:"md6",
    lg:"lg4"
  }
}

Notice you can bind them as class too:

<v-btn v-bind:class="Object.values(btn.size)">
  {{ btn.text }}
</v-btn>

vue - passing props from object to component

1 Answers