Как включить значение из данных JSON в модификатор класса BEM в Vue.js 2.0? - PullRequest
Новая
       7

Как включить значение из данных JSON в модификатор класса BEM в Vue.js 2.0?

0 голосов
/ 05 декабря 2018

Я хотел бы включить значение title в имя класса на плитке, чтобы следовать соглашениям об именах БЭМ, которые я использую.Как это можно сделать?

Вот что я пробовал: 

<h2 :class="{
  'title': true,
  'title--${item.title}': true
}">{{ item.title }}</h2>

Но в итоге это выглядит так: 

<h2 class="title title--${item.title}">Title</h2>

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Я думаю, что ответ Пола в значительной степени покрывает ваши потребности.Я просто хочу добавить, что если вы хотите применить класс условно, используя привязки классов Vue, то вы можете использовать Имена вычисляемых свойств ES6 .. 

<h2 :class="{
  'title': true,
  [`title--${item.title}`]: true
}">{{ item.title }}</h2>
0 голосов
/ 05 декабря 2018

Вам нужно в основном иметь вложенные строки и привязку, или просто использовать переменную в вашем компоненте.

Если вы хотите использовать вложенные строки, вы можете сделать это следующим образом: 

<h2 v-bind:class="title + ' title--' + item.title">Title</h2>

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

<h2 :class="title +' title--' + item.title">Title</h2>

Есливместо этого вы хотите вычислить весь шебанг, вы можете просто сделать его функцией, которую вы определите позже: 

<h2 :class="getClass(title, item)">Title</h2>

Затем в определении вашего компонента: 

methods: {
  getClass (title, item) {
    return `${title} title--${item.title}`
  }
}

Примечание при перечитывании вашеговопрос, я делаю предположение.Я предполагаю, что у вас есть два реквизита, title и item, и что title и item.title различны.Не стесняйтесь, если я ошибаюсь.

...