以 DOM Vue 方式用 div 包裹 iframe答案

【问题标题】：Wrap iframes with divs in DOM Vue way以 DOM Vue 方式用 div 包裹 iframe
【发布时间】：2020-10-11 15:46:45
【问题描述】：

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

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

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

Vue 的方法是什么？因为我能找到的唯一选择是document.createlement("div")，然后执行本机 javascript 内容。哪个不行，估计和组件重新渲染有关

【问题讨论】：

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

您的方法几乎是正确的：您需要做的就是为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>

【讨论】：