VueJS 忽略 InnerHTML

Question

嘿嘿

我有一个奇怪的用例（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>

Answer 1

尝试在插槽上使用v-pre。所以它不会被编译。