如何解决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。因此它将不会被编译。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。