0

我有一种情况,我的 Vue 组件以这种方式呈现 html(它来自数据库):

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

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

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

4

1 回答 1

0

您的方法几乎是正确的:您需要做的就是使用计算属性 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>

于 2020-10-11T15:56:38.323 回答