VueJS忽略InnerHTML

问题描述

Heya

我有一个奇怪的用例（Shopify）场景。我想将Shopify部分包装在有状态的Vue包装器中。包装的内容有点小问题，但在大多数情况下是有效的。包装器正在响应vuex绑定，并根据需要显示/隐藏innerHTML。

但是，我仍然在控制台中看到此警告：

[Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates,such as <style>,as they will not be parsed.

239|          </a>
240|        </h2>
241|        <style>
   |        ^^^^^^^

控制台警告让我的信心有些动摇，我希望排除Vue是我对包装内容所面临的一些挑战的根源。

我还想知道是否存在一种受支持的/正确的方法来告诉Vue.JS忽略给定元素的innerHTML而只是让浏览器来做它的事情。

下面是我正在做的事的一个很好的例子：

页面模板：

<article class="site-page" data-template-page>
  <div id="pool-covers" class="page-content"> <-- mounting point
    <covers-app>
      {% section 'pool_covers-data' %} <-- another vue component in a different section.

      <featured-collection> <-- stateful wrapper
        {% section 'dynamic-featured-collection' %} <-- content I want ignored by VueJS
      </featured-collection>
    </covers-app>
  </div>
</article>


{{ 'covers.app.js' | asset_url | script_tag }} <-- Webpack bundle

FeaturedCollection.vue：

<template>
  <div>
    <div v-show="step == 7">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "featured-collection",computed: {
    ...mapState(['step'])
  }
}
</script>

<style>
</style>

解决方法

尝试在插槽上使用v-pre。因此它将不会被编译。