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

最新推荐文章于 2022-07-28 21:43:56 发布
最新推荐文章于 2022-07-28 21:43:56 发布
阅读量5.5k 收藏 1
点赞数 2
分类专栏： html 文章标签： jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/floatdreamed/article/details/103378401
版权

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",导致了这个问题

所以,解决方式就是要么重命名index.html中id="top",要么重名vue挂载点id名称

Vue源码分析——第三章
Lee的博客
09-10 712
Vue源码分析——第一章 Vue源码分析——第二章 // only used in dev mode //检测 val必需是数字 function checkDuration(val, name, vnode) { if (typeof val !== 'number') { warn( "<transition> explicit " + name + " duration is not a valid number - " + "got " + ...
在jBPM中，文档通常包含了对事件处理机制的详细说明
BLOG域名:programb.blog.csdn.net
04-27 1165
在jBPM中，文档通常包含了对事件处理机制的详细说明。：当流程实例开始时触发，常常用于启动一系列操作或流程定义。：流程完成时触发，可用于执行清理或通知操作。：位于流程图上的特定位置，如条件分支或循环之前/之后，可以用来做出决策或改变流程路径。要深入了解如何在jBPM中使用这些事件，建议查阅官方文档或者jbpm中文用户手册，那里会提供详细的配置示例和API指南，教你如何设置事件监听器以响应不同的流程事件。
vue 报错：Templates should only be responsible for mapping the state to the UI. Avoid placing tags with
yehaocheng520的博客
03-12 1万+
今天又是踩坑的一天 今天使用vue写后台管理系统时，控制台一直报错：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. 百度一番后，发现问题是因为：Html结构部分缺少div标签闭合，然后仔细查看代码后发现
vue.js报错：Templates should only be responsible for mapping the state to the UI...
l_fireworks的博客
07-09 5156
“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.” “模板应该只负责将状态映射到UI。避免在模板中放置带有副作用的标记，例如<script>，因为它们不会被解析。” 这类报错，是因为标..
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side...
weixin_34272308的博客
08-22 1647
vue.js报错如下： - 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 n...
- Templates should only be responsible for mapping the state to the UI.错误
TE杨
02-25 939
今天正在做项目，开发者模式，莫名其妙报错,报错如下图: 看了下报错原因模板只负责将状态映射到UI。避免在模板中放置带有副作用的标记，例如<script>，因为它们不会被解析。 莫名其妙，也看不懂，我尝试着百度，有报错，但是和我的情况不一样，我看着像是script标签引入有错误，于是就去html上找，果然被我找到了，没有写闭合标签 最后提醒一下大家，细心一点，很多问题就迎刃而解了。 ...
vue-提示warning
heartOfblack 离开了电脑，我不希望我还有病
04-10 8761
[Vue warn]: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>.出现这个警告的原因可能是你新建VUE实例的代码放在了被绑定的组件当中比如<div id='l
ERROR Failed to compile with 4 errors 20:56:02 [eslint] D:\vuejsqimo\devtools-5.1.1\vue_shop\src\components\HelloWorld.vue 5:1 error The template root requires exactly one element vue/no-multiple-template-root ✖ 1 problem (1 error, 0 warnings) You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. error in ./src/components/HelloWorld.vue?vue&type=template&id=469af010& Module Error (from ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors 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 <script>, as they will not be parsed.
05-30
这个错误是由于一个 Vue 单文件组件（HelloWorld.vue）中的模板根节点包含了多个元素，而 Vue ...另外，模板应该只负责将状态映射到 UI 上，不应该包含任何具有副作用的标签，比如 <script> 标签，因为它们不会被解析。
vue.js:5108 [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 <script>, as they will not be parsed. 13 | 14 | </div> 15 | <script> | ^^^^^^^^ 16 | function sendData() { // 发送数据的方法 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 17 | var message = document.getElementById('input1').value; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 18 | // 获取输入框的值 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 19 | document.getElementById('message').innerHTML = message; // 在第二个组件中显示接收到的信息 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 20 | } | ^^^^^^^^^^^^^ 21 | function sendData() { // 发送数据的方法 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 22 | var message = document.getElementById('input2').value; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 23 | // 获取输入框的值 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 24 | document.getElementById('message').innerHTML = message; // 在第二个组件中显示接收到的信息 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 25 | } | ^^^^^^^^^^^^^ 26 | | 27 | </script> | ^^^^^^^^^^^^^^^^^ 28 | | 29 | </div> | ^^^^^^^^^^ (found in <Root>) warn$2 @ vue.js:5108
04-23
这个错误是关于 Vue.js 模板编译的问题，提示模板中不应该包含像 <script> 这样会产生副作用的标记，因为它们不会被解析。同时，模板只应将状态映射到 UI 上。该错误提示中给出的代码片段显示了一些函数，其中使用了...
Failed to compile. C:/Users/wang/Desktop/speedragon/page_index/car-sector/car-sector.vue?vue&type=template&id=ea66c920& (./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--17-0!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/filter-modules-template.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader!C:/Users/wang/Desktop/speedragon/page_index/car-sector/car-sector.vue?vue&type=template&id=ea66c920&) Module Error (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors 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 <script>, as they will not be parsed. 231| </div> 232| 233| <script> | ^^^^^^^^ 234| document.addEventListener('DOMContentLoaded', function() { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 235| // 移动端筛选面板切换 | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 236| const mobileToggle = document.getElementById('mobileToggle'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 237| const filterContainer = document.getElementById('filterContainer'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 238| | ^^^^^^^^^^^^^^ 239| if (mobileToggle && filterContainer) { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 240| mobileToggle.addEventListener('click', function() { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 241| filterContainer.classList.toggle('active'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 242| mobileToggle.innerHTML = filterContainer.classList.contains('active') ? | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 243| '<i class="fas fa-times"></i> 隐藏筛选条件' : | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 244| '<i class="fas fa-filter"></i> 显示筛选条件'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 245| }); | ^^^^^^^^^^^^^^^^^^^^^ 246| } | ^^^^^^^^^^^^^^^ 247| | ^^^^^^^^^^^^^^ 248| // 品牌选择效果 | ^^^^^^^^^^^^^^^^^^^^^^^ 249| const brandItems = document.querySelectorAll('.brand-item'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 250| brandItems.forEach(item => { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 251| item.addEventListener('click', function() { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 252| this.classList.toggle('selected'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 253| if (this.classList.contains('selected')) { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 254| this.style.backgroundColor = '#3498db'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 255| this.style.color = 'white'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 256| } else { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 257| this.style.backgroundColor = '#f0f7ff'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 258| this.style.color = '#333'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 259| } | ^^^^^^^^^^^^^^^^^^^^^^^ 260| }); | ^^^^^^^^^^^^^^^^^^^^^ 261| }); | ^^^^^^^^^^^^^^^^^ 262| | ^^^^^^^^^^^^^^ 263| // 范围选项选择效果 | ^^^^^^^^^^^^^^^^^^^^^^^^^ 264| const rangeOptions = document.querySelectorAll('.range-option'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 265| rangeOptions.forEach(option => { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 266| option.addEventListener('click', function() { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 267| // 移除同一组中其他选项的选中状态 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 268| const groupName = this.querySelector('input').getAttribute('name'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 269| document.querySelectorAll(`input[name="${groupName}"]`).forEach(input => { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 270| input.parentElement.classList.remove('selected'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 271| }); | ^^^^^^^^^^^^^^^^^^^^^^^^^ 272| | ^^^^^^^^^^^^^^^^^^^^^^ 273| // 添加当前选项的选中状态 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 274| this.classList.add('selected'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 275| this.style.borderColor = '#3498db'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 276| this.style.backgroundColor = '#e1f0fa'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 277| }); | ^^^^^^^^^^^^^^^^^^^^^ 278| }); | ^^^^^^^^^^^^^^^^^ 279| | ^^^^^^^^^^^^^^ 280| // 应用筛选按钮 | ^^^^^^^^^^^^^^^^^^^^^^^ 281| const applyBtn = document.querySelector('.action-btn'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 282| if (applyBtn) { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 283| applyBtn.addEventListener('click', function() { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 284| alert('筛选条件已应用！页面将显示符合条件的结果'); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 285| }); | ^^^^^^^^^^^^^^^^^^^^^ 286| } | ^^^^^^^^^^^^^^^ 287| }); | ^^^^^^^^^^^^^ 288| </script> | ^^^^^^^^^^^^^^^ 289| | 290| <style scoped> | ^^^^^^^^^^^^^^ 291| .content{ | ^^^^^^^^^^ 292| background-color: #f5f5f5; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 293| } | ^^ 294| .header { | ^^^^^^^^^^ 295| display: flex; | ^^^^^^^^^^^^^^^^^^^ 296| padding: 10rpx 5rpx; | ^^^^^^^^^^^^^^^^^^^^^^ 297| background-color: #fff; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 298| justify-content: center; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 299| align-items: center; | ^^^^^^^^^^^^^^^^^^^^^^^^^ 300| } | ^^ 301| | ^ 302| .logo { | ^^^^^^^^ 303| height: 80rpx; | ^^^^^^^^^^^^^^^^ 304| width: 300rpx; | ^^^^^^^^^^^^^^^^ 305| } | ^^ 306| | ^ 307| .search-bar { | ^^^^^^^^^^^^^^ 308| width: 80%; | ^^^^^^^^^^^^^^^^ 309| height: 50rpx; | ^^^^^^^^^^^^^^^^^^^ 310| justify-content: center; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 311| align-items: center; | ^^^^^^^^^^^^^^^^^^^^^^^^^ 312| } | ^^ 313| | ^ 314| .search-bar-box { | ^^^^^^^^^^^^^^^^^^ 315| display: flex; | ^^^^^^^^^^^^^^^^^^^ 316| width: 500rpx; | ^^^^^^^^^^^^^^^^^^^ 317| height: 50rpx; | ^^^^^^^^^^^^^^^^^^^ 318| border: 1rpx solid #000; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 319| border-radius: 50rpx; | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 320| align-items: center; | ^^^^^^^^^^^^^^^^^^^^^^^^^ 321| } | ^^ 322| | ^ 323| .search-span { | ^^^^^^^^^^^^^^^ 324| width: 70rpx; | ^^^^^^^^^^^^^^^ 325| height: 45rpx; | ^^^^^^^^^^^^^^^^ 326| margin-left: 20rpx; | ^^^^^^^^^^^^^^^^^^^^^ 327| } | ^^ 328| | ^ 329| .search-text { | ^^^^^^^^^^^^^^^ 330| width: 100%; | ^^^^^^^^^^^^^^^^^ 331| font-size: 24rpx; | ^^^^^^^^^^^^^^^^^^^^^^ 332| color: #7f7f81; | ^^^^^^^^^^^^^^^^^^^^ 333| text-align: center; | ^^^^^^^^^^^^^^^^^^^^^^^^ 334| } | ^^ 335| | ^ 336| .search-btn { | ^^^^^^^^^^^^^^ 337| background-color: #f5f5f5; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 338| text-align: center; | ^^^^^^^^^^^^^^^^^^^^^^^^ 339| display: inline-block; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 340| font-size: 24rpx; | ^^^^^^^^^^^^^^^^^^^^^^ 341| width: 150rpx; | ^^^^^^^^^^^^^^^^^^^ 342| height: 50rpx; | ^^^^^^^^^^^^^^^^^^^ 343| line-height: 50rpx; | ^^^^^^^^^^^^^^^^^^^^^^^^ 344| border-radius: 30rpx; | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 345| letter-spacing: 3rpx; | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 346| } | ^^ 347| .pickers{ | ^^^^^^^^^^ 348| display: flex; | ^^^^^^^^^^^^^^^^^^^ 349| } | ^^ 350| .pickers picker { | ^^^^^^^^^^^^^^^^^^ 351| flex:1; | ^^^^^^^^^^^^ 352| text-align: center; | ^^^^^^^^^^^^^^^^^^^^^^^^ 353| background-color: #fff; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 354| margin: 20rpx; | ^^^^^^^^^^^^^^^^^^^ 355| padding: 20rpx; | ^^^^^^^^^^^^^^^^^^^^ 356| } | ^^ 357| </style> | ^^^^^^^^ 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. 287| }); 288| </script> 289| | 290| <style scoped> | ^^^^^^^^^^^^^^ 291| .content{ | ^^^^^^^^^^ 292| background-color: #f5f5f5; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 293| } | ^^ 294| .header { | ^^^^^^^^^^ 295| display: flex; | ^^^^^^^^^^^^^^^^^^^ 296| padding: 10rpx 5rpx; | ^^^^^^^^^^^^^^^^^^^^^^ 297| background-color: #fff; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 298| justify-content: center; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 299| align-items: center; | ^^^^^^^^^^^^^^^^^^^^^^^^^ 300| } | ^^ 301| | ^ 302| .logo { | ^^^^^^^^ 303| height: 80rpx; | ^^^^^^^^^^^^^^^^ 304| width: 300rpx; | ^^^^^^^^^^^^^^^^ 305| } | ^^ 306| | ^ 307| .search-bar { | ^^^^^^^^^^^^^^ 308| width: 80%; | ^^^^^^^^^^^^^^^^ 309| height: 50rpx; | ^^^^^^^^^^^^^^^^^^^ 310| justify-content: center; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 311| align-items: center; | ^^^^^^^^^^^^^^^^^^^^^^^^^ 312| } | ^^ 313| | ^ 314| .search-bar-box { | ^^^^^^^^^^^^^^^^^^ 315| display: flex; | ^^^^^^^^^^^^^^^^^^^ 316| width: 500rpx; | ^^^^^^^^^^^^^^^^^^^ 317| height: 50rpx; | ^^^^^^^^^^^^^^^^^^^ 318| border: 1rpx solid #000; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 319| border-radius: 50rpx; | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 320| align-items: center; | ^^^^^^^^^^^^^^^^^^^^^^^^^ 321| } | ^^ 322| | ^ 323| .search-span { | ^^^^^^^^^^^^^^^ 324| width: 70rpx; | ^^^^^^^^^^^^^^^ 325| height: 45rpx; | ^^^^^^^^^^^^^^^^ 326| margin-left: 20rpx; | ^^^^^^^^^^^^^^^^^^^^^ 327| } | ^^ 328| | ^ 329| .search-text { | ^^^^^^^^^^^^^^^ 330| width: 100%; | ^^^^^^^^^^^^^^^^^ 331| font-size: 24rpx; | ^^^^^^^^^^^^^^^^^^^^^^ 332| color: #7f7f81; | ^^^^^^^^^^^^^^^^^^^^ 333| text-align: center; | ^^^^^^^^^^^^^^^^^^^^^^^^ 334| } | ^^ 335| | ^ 336| .search-btn { | ^^^^^^^^^^^^^^ 337| background-color: #f5f5f5; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 338| text-align: center; | ^^^^^^^^^^^^^^^^^^^^^^^^ 339| display: inline-block; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 340| font-size: 24rpx; | ^^^^^^^^^^^^^^^^^^^^^^ 341| width: 150rpx; | ^^^^^^^^^^^^^^^^^^^ 342| height: 50rpx; | ^^^^^^^^^^^^^^^^^^^ 343| line-height: 50rpx; | ^^^^^^^^^^^^^^^^^^^^^^^^ 344| border-radius: 30rpx; | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 345| letter-spacing: 3rpx; | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 346| } | ^^ 347| .pickers{ | ^^^^^^^^^^ 348| display: flex; | ^^^^^^^^^^^^^^^^^^^ 349| } | ^^ 350| .pickers picker { | ^^^^^^^^^^^^^^^^^^ 351| flex:1; | ^^^^^^^^^^^^ 352| text-align: center; | ^^^^^^^^^^^^^^^^^^^^^^^^ 353| background-color: #fff; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 354| margin: 20rpx; | ^^^^^^^^^^^^^^^^^^^ 355| padding: 20rpx; | ^^^^^^^^^^^^^^^^^^^^ 356| } | ^^ 357| </style> | ^^^^^^^^ tag <view> has no matching end tag. 1 | 2 | <view class="content"> | ^^^^^^^^^^^^^^^^^^^^^^ 3 | 4 | <!-- 顶部 --> at C:\Users\wang\Desktop\speedragon\page_index\car-sector\car-sector.vue:0
最新发布
06-04
在 Vue 单文件组件（*.vue）中，`<template>`、`<script>` 和 `<style>` 是三个主要的顶层语言块，分别用于定义视图、逻辑和样式[^2]。如果在 `<template>` 部分嵌套了 `<script>` 或 `<style>` 标签，可能会导致...
Templates should only be responsible for mapping the state to the UI.
weixin_45364670的博客
10-22 1141
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. 组件标签没有闭合，如缺少外部包围的标签。
Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to
dw将限制条件全部检测通过后才能提交表单
12-01 2107
Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the ui. Avoid placing tags… 原因是你新建VUE实例的代码放在了被绑定的组件/标签. 我好像在
Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to
俺老孙来也
09-15 2万+
vueJs出现Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as 模板应该只负责将状态映射到ui。避免在模板中放置带有副作用的标记，例如错误代码： <body> &lt...
报错 | Templates should only be responsible for mapping the state to the UI. Avoid placing tags with s
A123ppleQueen的博客
11-30 917
ERROR Failed to compile with 1 error 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. 错误是因为我把 script里的内容和style放入了templa...
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-e
大脸小覃的博客
09-16 2158
vue出现下面错误 Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as 检查是否为html没有写闭合标签 或者div没有闭合
【小程序项目开发-- 京东商城】uni-app之分类导航区域
bsegebr的博客
07-28 638
??欢迎来到?????魔术之家！！??该文章收录专栏专栏内容。
vue+freemarker中遇到的坑
码农无双的博客
03-31 1万+
       java后端开发者做后台管理系统，用模版技术还是挺方便的，但是如果在页面上对数据进行修改，怎么办呢？可以用jQuery选中各个dom节点的值，然后组装成后台接口中需要的Form，再用ajax请求后台，这种方式的缺点在于，如果数据字段比较多，需要手动选择很多个dom节点，再取值，想想都可怕。由于笔者之前做过Angul...
Vue中一些需要注意的点（采坑）
xidongdong1的博客
11-23 3万+
前言：记录在学Vue中需要注意的问题 1.给link添加事件、给组件绑定原生事件 在vue-router1中使用v-link写入路由，但是在vue-router2中要使用router-link写入路由，在浏览器渲染的时候会把router-link渲染成a。 有时候需要为router-link注册事件，对于一般的html元素，直接使用@click="eventFun"即可，但是对于rout
vue 报错 data functions should return an object: 和 Cannot read property '__ob__' of undefined
热门推荐
时光的博客
10-13 4万+
在vue里出现ata functions should return an object: 和 Cannot read property '__ob__' of undefined   报错是因为在 data () {},里没有返回(return)  需要写成 data(){ return{ }  }  就算没有数据也要写返回一个对象 (return)    ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值