Как в v-bind:class сделать конкатенацию?

Question

[Сергей Хлопов]

Здравствуйте, у меня есть входной параметр theme, и такой вот элемент в компоненте (если что их несколько просто я не стал весь код сюда скидывать):

<button :disabled="!prevPage" v-bind:class="{ pagination__btn_disabled: !prevPage }" type="button" title="Назад" class="pagination__btn" @click="onPrevPage">
  <img class="pagination__icon" src="/svg/admin/pagination/prev.svg" alt="Назад">
</button>

И нужно вот сделать что бы если параметр theme истина то мы добавляем класс к кнопке, такого вот вида: pagination__btn_theme_ + theme подскажите пожалуйста как более правильней это сделать ? Пробовал сделать вот так:

{ pagination__btn_disabled: !prevPage, 'pagination__btn_theme_' + theme : theme}

Но это выдаёт ошибку.
Заранее благодарю за ответ.

Comments

[Артур Карапетян]

`pagination__btn_theme_${theme}`?

Answer 1

[Сергей delphinpro]

computed:{
  classes(){
    return {
      pagination__btn_disabled: !this.prevPage,
      [`pagination__btn_theme_${this.theme}`]: !!this.theme,
    }
  }
}
<button
  class="pagination__btn"
  :class="classes"
  :disabled="!prevPage"
  type="button"
  title="Назад"
  @click="onPrevPage"
>
  <img class="pagination__icon" src="/svg/admin/pagination/prev.svg" alt="Назад">
</button>

Comments

[Сергей Хлопов]

Благодарю вас, а в вычисляемое свойство можно же параметры передать ?

[Сергей delphinpro]

Сергей Хлопов, с параметрами можете сделать метод

[Сергей delphinpro]

Вообще не желательно. Вычислялки кешируются движком и не пересчитываются на каждый чих.

[Сергей Хлопов]

Сергей delphinpro, Понял, благодарю вас. Но я просто про параметр спросил то что у меня помимо кнопок есть ещё input, и на input класс нужно повесить такой вот

[`pagination__input_theme_${this.theme}`]: !!this.theme,

поэтому я думаю может сделать параметр в который передавать вот эту часть pagination__input_theme_

[Сергей delphinpro]

Сергей Хлопов, не заморачивайтесь. Делайте проще:

btnClasses(){
  return {
    pagination__btn_disabled: !this.prevPage,
    [`pagination__btn_theme_${this.theme}`]: !!this.theme,
  }
}
inpClasses(){
  return {
    [`pagination__input_theme_${this.theme}`]: !!this.theme,
  }
}

Note:
Когда я пишу фронт на вью, я немного отступаю от "чистого" бэма

name: 'MyComp',
props: {
  theme: String
}
computed:{
  computedTheme() { return `theme-${theme}`; }
}
<div class=MyComp>
  <input class="MyComp__input" :class={ computedTheme }/>
  <button class="MyComp__btn" :class={ computedTheme }/>
</div>
<style> 
  .MyComp {
    &__input {
      &.theme-green {}
      &.theme-red {}
    }
    &__btn {
      &.theme-green {}
      &.theme-red {}
    }
  }
</style>

где-то используем:

<MyComp theme="green">
</MyComp>

или вообще повесить класс на весь компонент и использовать вложенность

<div class=MyComp :class={ computedTheme }>
  <input class="MyComp__input"/>
  <button class="MyComp__btn"/>
</div>
<style> 
  .MyComp {
    &__input { }
    &__btn { }

    &.theme-green &__input { }
    &.theme-green &__btn { }

    &.theme-red &__input { }
    &.theme-red &__btn { }
  }
</style>

[Сергей Хлопов]

Сергей delphinpro, понял, благодарю вас