关于报错"Templates should only be responsible for mapping the state to the UI"的原因整理

最新推荐文章于 2025-04-26 00:20:52 发布

Hwweic

最新推荐文章于 2025-04-26 00:20:52 发布

阅读量5.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html 文章标签： jquery html

本文链接：https://blog.youkuaiyun.com/floatdreamed/article/details/103378401

html 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在Vue项目中，由于实例挂载元素ID重复导致的问题及解决方案。具体表现为在index.html和top.html中同时定义了相同的ID，引发模板解析错误。解决策略包括修改index.html中的元素ID或调整Vue挂载点的ID，避免冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue中实例挂载的元素节点名称不明确导致的

下面还原下过程:

①在index.html中引入头部信息top.html

②top.html引入top.js

**top.html,其最外层div的id取名为top(加入id是为了vue进行挂载)

**top.js,通过"#top"进行挂载

结果页面会报错,其报错信息如下(精简过):

[Vue warn]: Error compiling template:

<div id="top"><script type="text/javascript" src="./page-js/top.js"></script>
<div id="top">
	<div class="header">
	.........
</div>
</div>

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

(found in <Root>)

最后发现原因,在index.html中也定义了id="top",导致了这个问题