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>