Отображать данные внутри синтаксиса шаблона во всплывающем окне

Question

У меня есть метод, чтобы показать всплывающее окно с некоторыми данными, функция получает некоторые data в массиве, и мне нужно показать его в всплывающем HTML.

openDetails(data) {
    const self = this;
    // Create popup
    if (!self.popup) {
        self.popup = self.$f7.popup.create({
            content: `
  <div class="popup itemDetails">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">{{ data.name }}</div>
          <div class="right"><a href="#" class="link popup-close">volver</a></div>
        </div>
      </div>
      <div class="page-content">
        <div class="block">
          <p>This popup was created dynamically</p>
          <p>Lorem ipsum dolor sit amet,</p>
        </div>
      </div>
    </div>
  </div>
`.trim(),
        });
    }
    // Open it
    self.popup.open();
},

Вот так выглядит всплывающее окно

Что я здесь не так делаю?

Answer 1

Поскольку вы используете литералы шаблона :

<div class="title">${data.name}</div>

Answer 2

 <div class="title" v-html="data.name"></div>

Вы пробовали так?