javascript - 以 DOM Vue 方式用 div 包裹 iframe

Question

我有一种情况，我的 Vue 组件以这种方式呈现 html（它来自数据库）：

  <div
          id="post-body-text"
          class="post__main-text"
          v-html="postText"
        ></div>

现在在这个 HTML 中，可能有我想用特殊样式包装在 div 中的 iframe（以使 iframe 大小动态）

Vue 的方法是什么？因为我能找到的唯一选择是document.createlement("div")然后做本机 javascript 的东西。哪个不起作用，我猜它与组件重新渲染有关

Answer 1

您的方法几乎是正确的：您需要做的就是使用计算属性 for v-html，以便您可以在计算属性中进行所有解析：

new Vue({
  el: '#app',
  data: {
    postText: '<h2>Hello world</h2><iframe></iframe><p>Lorem ipsum</p>'
  },
  computed: {
    parsedPostText() {
      const el = document.createElement('div');
      el.innerHTML = this.postText;
      el.querySelectorAll('iframe').forEach(iframe => {
        // Wrapper logic adapted from
        // https://stackoverflow.com/a/57377341/395910
        const wrapper = document.createElement('div');
        iframe.parentNode.insertBefore(wrapper, iframe);
        wrapper.appendChild(iframe);
      });
      return el.innerHTML;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="post-body-text" class="post__main-text" v-html="parsedPostText"></div>
</div>