在弹出窗口的模板语法中显示数据

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

使用template literals时：

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

Answer 2

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

您尝试过这样吗？