Vue - добавление проп в качестве модификатора Bem

Question

Я передаю реквизит 'type' своему компоненту для использования в качестве модификатора BEM.

 <div class="badge badge--{{this.$props.type}}">

Однако, когда я пытаюсь объединить класс, я получаю сообщение об ошибке. Как мне этого добиться?

Answer 1

Более чистый способ сделать это - создать computed property:

computed: {
  badgeClasses() {
    return `badge badge--${this.type}`;  
  },
},

А затем свяжите это в своем HTML:

<div :class="badgeClasses">

Но вы также можете просто связать свойство, как вы пытались, но с обратной кавычкой вместо простой цитаты:

<div class="`badge badge--${type}`">