vue - передача реквизита от объекта к компоненту

Question

Мне нужно передать некоторые реквизиты компоненту, у меня есть реквизиты в объекте, и я хочу сделать что-то вроде этого:

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

Где мой btn объект выглядит так:

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

результирующий компонент будет тогда эквивалентен записи:

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

Это вообще возможно? Единственный способ, которым я могу думать, чтобы сделать это в данный момент, - это иметь опору для каждого изменения размера, а затем условно установить ее в значение true или false. но это кажется таким излишним. У кого-нибудь есть идеи?

К вашему сведению - я использую Vuetify, если это имеет какое-либо значение

Answer 1

Сделайте ваш btn объект следующим образом:

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

Затем вы можете использовать синтаксис v-bind для создания атрибутов:

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

---

Или, если вы не можете изменить объект btn:

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

Обратите внимание, что вы можете связать их как класс:

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