How to include value from JSON data in BEM class modifier in Vue.js 2.0?

Question

I would like to include the value of title in the class name on a tile to follow the BEM naming conventions I'm using. How can this be done?

Here's what I've tried:

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

But it ends up looking like:

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

Answer 1

I think Paul's answer pretty much covers your need. I just want to add that if you want to apply the class conditionally using Vue's class bindings then you can make use of ES6's computed property names ..

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

Answer 2

You need to basically have nested strings and bind, or just use a variable in your component.

If you want to do the nested strings, you can do it like this:

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

Note you can also use the bind shorthand:

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

If you want to calculate the whole shebang instead, you can just make it a function that you define later:

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

Then later in your component definition:

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

Note upon rereading your question, I'm making an assumption. I'm assuming that you have two props, title and item , and that title and item.title are different. Feel free to adjust if I'm mistaken.