Мне нужно передать некоторые реквизиты компоненту, у меня есть реквизиты в объекте, и я хочу сделать что-то вроде этого:
<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, если это имеет значение
Сделайте свой объект 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>