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

Question

Сергей Хлопов @Shlop

Full Stack Developer (PHP/Laravel/JavaScript)

Vue.js

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

Здравствуйте, у меня есть входной параметр 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}

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

Вопрос задан более трёх лет назад
84 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Решения вопроса 1

6 комментариев

Сергей Хлопов @Shlop Автор вопроса

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

Написано более трёх лет назад
Сергей delphinpro @delphinpro

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

Написано более трёх лет назад
Сергей delphinpro @delphinpro

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

Написано более трёх лет назад
Сергей Хлопов @Shlop Автор вопроса
Сергей delphinpro, Понял, благодарю вас. Но я просто про параметр спросил то что у меня помимо кнопок есть ещё input, и на input класс нужно повесить такой вот
[`pagination__input_theme_${this.theme}`]: !!this.theme,
поэтому я думаю может сделать параметр в который передавать вот эту часть pagination__input_theme_
Написано более трёх лет назад

Сергей delphinpro @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>

Написано более трёх лет назад

Сергей Хлопов @Shlop Автор вопроса

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

Vue.js

Простой
Как получить событие клика в updated()?
- 1 подписчик
- 7 часов назад
- 17 просмотров
0

ответов
Vue.js

+1 ещё

Средний
Как использовать хуки NUXT в модулях?
- 1 подписчик
- 15 часов назад
- 32 просмотра
1

ответ
Vue.js

Простой
Как решить проблему с логикой валидации после перезагрузки страницы в Vue.js?
- 1 подписчик
- 16 часов назад
- 35 просмотров
0

ответов
Vue.js

Средний
Как сделать светлую тему по дефолту во Vueform?
- 1 подписчик
- вчера
- 39 просмотров
1

ответ
Vue.js

Средний
Как разрешить пути к SVG во Vue-проекте?
- 1 подписчик
- вчера
- 51 просмотр
2

ответа
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 100 просмотров
0

ответов
Vue.js

Простой
Как грамотно реализовать поисковую строку?
- 1 подписчик
- вчера
- 75 просмотров
1

ответ
Vue.js

Простой
Не работают @media-query на Vue 2, как исправить?
- нет подписчиков
- 17 апр.
- 55 просмотров
0

ответов
Vue.js

+1 ещё

Простой
Почему компонент не получает данные от pinia?
- 1 подписчик
- 16 апр.
- 72 просмотра
1

ответ
Vue.js

Простой
Как изменить иконку календаря по умолчанию у date picker element plus?
- 1 подписчик
- 16 апр.
- 64 просмотра
1

ответ
Показать ещё Загружается…

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Разработчик Vue.js

Кортекс

от 60 000 до 100 000 ₽

Frontend developer (middle/senior)

//stablecode

от 210 000 ₽

Привязка к Маркетплейсам 1С Розница 2.3

20 апр. 2024, в 05:26

10000 руб./за проект

Дописать функцию на Flutter, работа с yandex map kit

20 апр. 2024, в 04:18

3000 руб./за проект

Английская версия для сайта на WordPress

20 апр. 2024, в 03:34

8000 руб./за проект

Answer 1 · 2019-10-04 12:34:55

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>

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт