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

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" v-html="data.name"></div>

你试过这样吗？

Answer 2

因为你正在使用 template literals:

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

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

Display data inside Template Syntax in popup

vue.js

html-framework-7