vue.js报错：Templates should only be responsible for mapping the state to the UI...

最新推荐文章于 2022-03-03 10:01:26 发布
原创 最新推荐文章于 2022-03-03 10:01:26 发布 · 5.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #vue

本文讨论了在HTML模板中避免使用带有副作用的标签，如<script>，因为这些标签可能不被解析，导致模板功能异常。作者通过分享自己的经历，提醒开发者注意检查并正确使用HTML标签，以确保模板正常工作。

“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>，因为它们不会被解析。”

这类报错，是因为标签识别不了，检查一下有没有写错html标签。后来仔细看，发现我是把table标签写错了，改回来就好了。

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标签闭合，然后仔细查看代码后发现
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side...
weixin_34272308的博客
08-22 1671
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"的原因整理
FloatDreamed的博客
12-03 5612
1.vue中实例挂载的元素节点名称不明确导致的 下面还原下过程: ①在index.html中引入头部信息top.html ②top.html引入top.js **top.html,其最外层div的id取名为top(加入id是为了vue进行挂载) **top.js,通过"#top"进行挂载 结果页面会报错,其报错信息如下(精简过): [Vue warn]: Error com...
- Templates should only be responsible for mapping the state to the UI.错误
TE杨
02-25 974
今天正在做项目，开发者模式，莫名其妙报错,报错如下图: 看了下报错原因模板只负责将状态映射到UI。避免在模板中放置带有副作用的标记，例如<script>，因为它们不会被解析。 莫名其妙，也看不懂，我尝试着百度，有报错，但是和我的情况不一样，我看着像是script标签引入有错误，于是就去html上找，果然被我找到了，没有写闭合标签 最后提醒一下大家，细心一点，很多问题就迎刃而解了。 ...
报错 | Templates should only be responsible for mapping the state to the UI. Avoid placing tags with s
A123ppleQueen的博客
11-30 952
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-effects in your templates, such as <script>, as they will not be parsed.
10-14
嗯，用户这次提出了一个关于前端模板设计原则的问题，核心是理解"模板仅负责状态到UI映射"的理念以及避免使用有副作用标签的原因。用户特别强调了要参考站内引用内容，但实际提供的引用[1]主要讲事件处理机制，引用...
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 要求每个模板只能有一个根节点。你需要将模板中的多个根节点包裹在一个父元素中，或将其中一些根节点转换为子元素。另外...
Module Error (from ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error)
09-24
- Templates should only be responsible for mapping the state to the UI... - v-for can only be used on template or element ``` ### 建议开启详细日志 ```bash npm run serve -- --log-level=debug ``` 或...
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 上。该错误提示中给出的代码片段显示了一些函数，其中使用了...
Compiled with problems: × ERROR in ./src/views/admin/AdminDashboard.vue?vue&type=template&id=716cc37f&scoped=true (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/admin/AdminDashboard.vue?vue&type=template&id=716cc37f&scoped=true) 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. 107| ¥{{ scope.row.totalAmount.toFixed(2) }} 108| </template> 109| | 110| <script> | ^^^^^^^^ 111| import AdminDashboardJS from './js/AdminDashboard.js'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 112| | 113| export default { | ^^^^^^^^^^^^^^^^ 114| ...AdminDashboardJS | ^^^^^^^^^^^^^^^^^^^^^ 115| }; | ^^ 116| </script> | ^^^^^^^^^ 117| | 118| <style scoped> | ^^^^^^^^^^^^^^ 119| @import './css/AdminDashboard.css'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 120| </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. 115| }; 116| </script> 117| | 118| <style scoped> | ^^^^^^^^^^^^^^ 119| @import './css/AdminDashboard.css'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 120| </style> | ^^^^^^^^ tag <el-table-column> has no matching end tag. 103| <el-table :data="latestOrders" style="width: 100%" border size="small"> 104| <el-table-column prop="orderNo" label="订单编号" min-width="180"></el-table-column> 105| <el-table-column prop="totalAmount" label="订单金额" min-width="100"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 106| <template slot-scope="scope"> 107| ¥{{ scope.row.totalAmount.toFixed(2) }} tag <el-table> has no matching end tag. 101| </div> 102| <div class="latest-content"> 103| <el-table :data="latestOrders" style="width: 100%" border size="small"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 104| <el-table-column prop="orderNo" label="订单编号" min-width="180"></el-table-column> 105| <el-table-column prop="totalAmount" label="订单金额" min-width="100"> tag <div> has no matching end tag. 100| <el-link type="primary" @click="viewAllOrders">查看全部 <i class="el-icon-arrow-right"></i></el-link> 101| </div> 102| <div class="latest-content"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 103| <el-table :data="latestOrders" style="width: 100%" border size="small"> 104| <el-table-column prop="orderNo" label="订单编号" min-width="180"></el-table-column> tag <div> has no matching end tag. 95 | <!-- 订单和用户信息区域 --> 96 | <div class="latest-section"> 97 | <div class="latest-card"> | ^^^^^^^^^^^^^^^^^^^^^^^^^ 98 | <div class="latest-header"> 99 | <h3>最新订单信息</h3> tag <div> has no matching end tag. 94 | 95 | <!-- 订单和用户信息区域 --> 96 | <div class="latest-section"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 97 | <div class="latest-card"> 98 | <div class="latest-header"> tag <div> has no matching end tag. 1 | 2 | 3 | <div class="admin-dashboard-container"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 4 | <div class="page-header"> 5 | <h2>仪表盘</h2> ERROR in ./src/views/admin/Marketing.vue?vue&type=template&id=2760991c&scoped=true (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/admin/Marketing.vue?vue&type=template&id=2760991c&scoped=true) 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. 61 | 62 | </template> 63 | | 64 | <script> | ^^^^^^^^ 65 | import MarketingJS from './js/Marketing.js'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 66 | | 67 | export default { | ^^^^^^^^^^^^^^^^ 68 | ...MarketingJS | ^^^^^^^^^^^^^^^^ 69 | }; | ^^ 70 | </script> | ^^^^^^^^^ 71 | | 72 | <style scoped> | ^^^^^^^^^^^^^^ 73 | @import './css/Marketing.css'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 74 | </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. 69 | }; 70 | </script> 71 | | 72 | <style scoped> | ^^^^^^^^^^^^^^ 73 | @import './css/Marketing.css'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 74 | </style> | ^^^^^^^^ tag <el-table-column> has no matching end tag. 55 | <el-table :data="couponList" style="width: 100%;" border size="small"> 56 | <el-table-column type="index" width="50" label="序号"></el-table-column> 57 | <el-table-column prop="name" label="优惠券名称" min-width="180"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 58 | <template slot-scope="scope"> 59 | <div class="coupon-name">{{ scope.row.name }}</div> tag <el-table> has no matching end tag. 53 | 54 | <!-- 优惠券列表 --> 55 | <el-table :data="couponList" style="width: 100%;" border size="small"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 56 | <el-table-column type="index" width="50" label="序号"></el-table-column> 57 | <el-table-column prop="name" label="优惠券名称" min-width="180"> tag <div> has no matching end tag. 12 | <!-- 优惠券管理 --> 13 | <el-tab-pane label="优惠券管理" name="coupons"> 14 | <div class="tab-content"> | ^^^^^^^^^^^^^^^^^^^^^^^^^ 15 | <!-- 操作按钮 --> 16 | <div class="action-bar"> tag <el-tab-pane> has no matching end tag. 11 | <el-tabs v-model="activeTab" class="marketing-tabs"> 12 | <!-- 优惠券管理 --> 13 | <el-tab-pane label="优惠券管理" name="coupons"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 14 | <div class="tab-content"> 15 | <!-- 操作按钮 --> tag <el-tabs> has no matching end tag. 9 | <div class="content-card"> 10 | <!-- 选项卡 --> 11 | <el-tabs v-model="activeTab" class="marketing-tabs"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 12 | <!-- 优惠券管理 --> 13 | <el-tab-pane label="优惠券管理" name="coupons"> tag <div> has no matching end tag. 7 | </div> 8 | 9 | <div class="content-card"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 10 | <!-- 选项卡 --> 11 | <el-tabs v-model="activeTab" class="marketing-tabs"> tag <div> has no matching end tag. 1 | 2 | 3 | <div class="admin-marketing-container"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 4 | <div class="page-header"> 5 | <h2>营销管理</h2> ERROR in ./src/views/admin/OrdersList.vue?vue&type=template&id=d6917ac6 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/admin/OrdersList.vue?vue&type=template&id=d6917ac6) Module Error (from ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors compiling template: tag <el-button> has no matching end tag. 114| {{ scope.row.orderStatus === 'WAIT_PAY' ? '催付' : '发货' }} 115| </el-button> 116| <el-button size="small" type="danger" @click="cancelOrder(scope.row)" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 117| v-if="scope.row.orderStatus === 'WAIT_PAY'">取消订单</el按钮> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 118| </template> tag <el-button> has no matching end tag. 109| <el-table-column label="操作" min-width="180" fixed="right"> 110| <template slot-scope="scope"> 111| <el-button size="small" @click="viewOrderDetail(scope.row.orderNo)">查看详情</el按钮> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 112| <el-button size="small" type="primary" @click="processOrder(scope.row)" 113| v-if="scope.row.orderStatus === 'WAIT_PAY' || scope.row.orderStatus === 'WAIT_SHIP'"> tag <el-button> has no matching end tag. 138| <span class="selected-count">已选择 {{ selectedOrders.length }} 条订单</span> 139| <el-button size="small" type="danger" @click="batchCancelOrders">批量取消</el按钮> 140| <el-button size="small" type="primary" @click="batchExportOrders">批量导出</el按钮> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 141| </div> 142| </div> tag <el-button> has no matching end tag. 137| <div class="batch-operations" v-if="selectedOrders.length > 0"> 138| <span class="selected-count">已选择 {{ selectedOrders.length }} 条订单</span> 139| <el-button size="small" type="danger" @click="batchCancelOrders">批量取消</el按钮> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 140| <el-button size="small" type="primary" @click="batchExportOrders">批量导出</el按钮> 141| </div> tag <el-input> has no matching end tag. 158| </el-form-item> 159| <el-form-item label="物流单号" prop="trackingNumber"> 160| <el-input v-model="shipForm.trackingNumber" placeholder="请输入物流单号"></el输入> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 161| </el-form-item> 162| <el-form-item label="发货备注"> tag <el-input> has no matching end tag. 161| </el-form-item> 162| <el-form-item label="发货备注"> 163| <el-input v-model="shipForm.remark" type="textarea" placeholder="可输入发货说明" :rows="3"></el输入> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 164| </el-form项> 165| </el-form> tag <el-form-item> has no matching end tag. 160| <el-input v-model="shipForm.trackingNumber" placeholder="请输入物流单号"></el输入> 161| </el-form-item> 162| <el-form-item label="发货备注"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 163| <el-input v-model="shipForm.remark" type="textarea" placeholder="可输入发货说明" :rows="3"></el输入> 164| </el-form项> tag <el-button> has no matching end tag. 166| <div slot="footer" class="dialog-footer"> 167| <el-button @click="shipDialogVisible = false">取消</el按钮> 168| <el-button type="primary" @click="submitShipment">确认发货</el按钮> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 169| </div> 170| </el-dialog> tag <el-button> has no matching end tag. 165| </el-form> 166| <div slot="footer" class="dialog-footer"> 167| <el-button @click="shipDialogVisible = false">取消</el按钮> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 168| <el-button type="primary" @click="submitShipment">确认发货</el按钮> 169| </div> Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 143| 144| <!-- 发货对话框 --> 145| <el-dialog title="订单发货" :visible.sync="shipDialogVisible" width="500px"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 146| <el-form :model="shipForm" :rules="shipFormRules" ref="shipForm" label-width="100px"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 147| <el-form-item label="订单编号"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 148| <el-input v-model="shipForm.orderNo" disabled></el-input> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 149| </el-form-item> | ^^^^^^^^^^^^^^^^^^^^^ 150| <el-form-item label="物流公司" prop="shippingCompany"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 151| <el-select v-model="shipForm.shippingCompany" placeholder="请选择物流公司"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 152| <el-option label="顺丰速运" value="SF"></el-option> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 153| <el-option label="圆通速递" value="YT"></el-option> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 154| <el-option label="中通快递" value="ZT"></el-option> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 155| <el-option label="申通快递" value="ST"></el-option> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 156| <el-option label="京东物流" value="JD"></el-option> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 157| </el-select> | ^^^^^^^^^^^^^^^^^^^^ 158| </el-form-item> | ^^^^^^^^^^^^^^^^^^^^^ 159| <el-form-item label="物流单号" prop="trackingNumber"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 160| <el-input v-model="shipForm.trackingNumber" placeholder="请输入物流单号"></el输入> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 161| </el-form-item> | ^^^^^^^^^^^^^^^^^^^^^ 162| <el-form-item label="发货备注"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 163| <el-input v-model="shipForm.remark" type="textarea" placeholder="可输入发货说明" :rows="3"></el输入> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 164| </el-form项> | ^^^^^^^^^^^^^^^^^ 165| </el-form> | ^^^^^^^^^^^^^^ 166| <div slot="footer" class="dialog-footer"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 167| <el-button @click="shipDialogVisible = false">取消</el按钮> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 168| <el-button type="primary" @click="submitShipment">确认发货</el按钮> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 169| </div> | ^^^^^^^^^^ 170| </el-dialog> | ^^^^^^^^^^^^^^ 171| </div> | ^^^^^^ ERROR in ./src/views/admin/ProductsList.vue?vue&type=template&id=06c7319c (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/admin/ProductsList.vue?vue&type=template&id=06c7319c) 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. 101| 102| </template> 103| | 104| <script> | ^^^^^^^^ 105| import ProductsListJS from './js/ProductsList.js' | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 106| | 107| export default { | ^^^^^^^^^^^^^^^^ 108| ...ProductsListJS | ^^^^^^^^^^^^^^^^^^^ 109| } | ^ 110| </script> | ^^^^^^^^^ 111| | 112| <style scoped> | ^^^^^^^^^^^^^^ 113| @import './css/ProductsList.css'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 114| </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. 109| } 110| </script> 111| | 112| <style scoped> | ^^^^^^^^^^^^^^ 113| @import './css/ProductsList.css'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 114| </style> | ^^^^^^^^ tag <el-table-column> has no matching end tag. 94 | <el-table-column type="selection" width="55"></el-table-column> 95 | <el-table-column prop="id" label="商品ID" width="100"></el-table-column> 96 | <el-table-column label="商品图片" width="80"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 97 | <template slot-scope="scope"> 98 | <el-image :src="scope.row.mainImage" :preview-src-list="[scope.row.mainImage]" tag <el-table> has no matching end tag. 89 | <!-- 商品列表表格 --> 90 | <div class="table-section"> 91 | <el-table :data="productsData" style="width: 100%" stripe border | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 92 | @selection-change="handleSelectionChange" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 93 | @row-click="handleRowClick"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ tag <div> has no matching end tag. 88 | 89 | <!-- 商品列表表格 --> 90 | <div class="table-section"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 91 | <el-table :data="productsData" style="width: 100%" stripe border 92 | @selection-change="handleSelectionChange" tag <div> has no matching end tag. 7 | </div> 8 | 9 | <div class="content-card"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 10 | <!-- 操作按钮栏 --> 11 | <div class="action-bar"> tag <div> has no matching end tag. 1 | 2 | 3 | <div class="admin-products-container"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 4 | <div class="page-header"> 5 | <h2>商品管理</h2> ERROR in ./src/views/admin/UsersList.vue?vue&type=template&id=2e29edbc (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/admin/UsersList.vue?vue&type=template&id=2e29edbc) 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. 102| 103| </template> 104| | 105| <script> | ^^^^^^^^ 106| import UsersListJS from './js/UsersList.js'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 107| | 108| export default { | ^^^^^^^^^^^^^^^^ 109| ...UsersListJS | ^^^^^^^^^^^^^^^^ 110| }; | ^^ 111| </script> | ^^^^^^^^^ 112| | 113| <style scoped> | ^^^^^^^^^^^^^^ 114| @import './css/UsersList.css'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 115| </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. 110| }; 111| </script> 112| | 113| <style scoped> | ^^^^^^^^^^^^^^ 114| @import './css/UsersList.css'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 115| </style> | ^^^^^^^^ tag <el-table-column> has no matching end tag. 93 | <el-table-column type="selection" width="55"></el-table-column> 94 | <el-table-column prop="id" label="用户ID" width="100"></el-table-column> 95 | <el-table-column label="头像" width="80"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 96 | <template slot-scope="scope"> 97 | <el-avatar :src="scope.row.avatar" tag <el-table> has no matching end tag. 88 | <!-- 用户列表表格 --> 89 | <div class="table-section"> 90 | <el-table :data="usersData" style="width: 100%" stripe border | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 91 | @selection-change="handleSelectionChange" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 92 | @row-click="handleRowClick"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ tag <div> has no matching end tag. 87 | 88 | <!-- 用户列表表格 --> 89 | <div class="table-section"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 90 | <el-table :data="usersData" style="width: 100%" stripe border 91 | @selection-change="handleSelectionChange" tag <div> has no matching end tag. 7 | </div> 8 | 9 | <div class="content-card"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 10 | <!-- 操作按钮栏 --> 11 | <div class="action-bar"> tag <div> has no matching end tag. 1 | 2 | 3 | <div class="admin-users-container"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 4 | <div class="page-header"> 5 | <h2>用户管理</h2> ERROR [eslint] C:\Users\Lenovo\Desktop\电子商务平台系统\ecommerce-project\frontend\src\views\FAQ.vue 54:33 error 'index' is defined but never used vue/no-unused-vars C:\Users\Lenovo\Desktop\电子商务平台系统\ecommerce-project\frontend\src\views\admin\Marketing.vue 146:105 error Parsing error: x-invalid-end-tag vue/no-parsing-error 147:140 error Parsing error: x-invalid-end-tag vue/no-parsing-error 148:140 error Parsing error: x-invalid-end-tag vue/no-parsing-error 166:15 error Parsing error: x-invalid-end-tag vue/no-parsing-error 196:98 error Parsing error: x-invalid-end-tag vue/no-parsing-error 201:15 error Parsing error: x-invalid-end-tag vue/no-parsing-error 213:70 error Parsing error: x-invalid-end-tag vue/no-parsing-error 228:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 238:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 244:93 error Parsing error: x-invalid-end-tag vue/no-parsing-error 252:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 260:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 264:63 error Parsing error: x-invalid-end-tag vue/no-parsing-error 273:72 error Parsing error: x-invalid-end-tag vue/no-parsing-error 282:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 292:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 299:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 309:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 326:96 error Parsing error: x-invalid-end-tag vue/no-parsing-error 328:86 error Parsing error: x-invalid-end-tag vue/no-parsing-error 330:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 338:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 341:62 error Parsing error: x-invalid-end-tag vue/no-parsing-error 342:66 error Parsing error: x-invalid-end-tag vue/no-parsing-error 351:66 error Parsing error: x-invalid-end-tag vue/no-parsing-error 352:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 359:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 371:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 373:70 error Parsing error: x-invalid-end-tag vue/no-parsing-error 374:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 384:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 387:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 395:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error 398:55 error Parsing error: x-invalid-end-tag vue/no-parsing-error 399:59 error Parsing error: x-invalid-end-tag vue/no-parsing-error C:\Users\Lenovo\Desktop\电子商务平台系统\ecommerce-project\frontend\src\views\admin\OrderDetail.vue 91:15 error 'orderId' is assigned a value but never used no-unused-vars C:\Users\Lenovo\Desktop\电子商务平台系统\ecommerce-project\frontend\src\views\admin\OrdersList.vue 279:0 error Parsing error: Unexpected token 104 | } 105 | return map든 > 106 | | ^ C:\Users\Lenovo\Desktop\电子商务平台系统\ecommerce-project\frontend\src\views\user\js\FAQ.js 104:28 error Do not access Object.prototype method 'hasOwnProperty' from target object no-prototype-builtins ✖ 39 problems (39 errors, 0 warnings)
最新发布
11-12
从你提供的错误信息来看，你的 Vue 项目在编译时出现了多个问题，主要集中在以下几类： --- ### 1. **模板中包含 `<script>` 或 `<style>` 标签** Vue 单文件组件的模板部分（`.vue` 文件中的 `<template>`）**不...
vue-提示warning
heartOfblack 离开了电脑，我不希望我还有病
04-10 8786
[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
Templates should only be responsible for mapping the state to the UI.
weixin_45364670的博客
10-22 1162
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 2140
Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the ui. Avoid placing tags… 原因是你新建VUE实例的代码放在了被绑定的组件/标签. 我好像在
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-e
大脸小覃的博客
09-16 2176
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没有闭合
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...
Vue自定义组件封装 浪费两个小时的问题
sinat_36227086的博客
08-21 330
报错：Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as 网上查到的报错原因： 标签内部不止一个根元素而导致报错。 =》排除 新建VUE实例的代码放在了被绑定的组件当中。 具体解释点我 =》排除 漏写了一个即根元素未正确闭合。 =》排除 我就说聪明的我根本就不会犯以上这么低级
解决Vue template中无法使用script标签的问题
阿锦的博客
12-17 6944
文章目录问题背景 问题背景 在公司写了个网页，网站运营搞起来了流量还不错，于是老板叫我们在网站中各个位置中插入广告位，谷歌提供的广告位大概长这样： <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=xxx" crossorigin="anonymous"></script> <!-- HomeTop_square --> <ins
vue报错
yigeboke的博客
03-03 643
意思是:模板应该只负责将状态映射到UI。避免在模板中放置带有副作用的标记，例如<script>，因为它们不会被解析。 这是因为我再页面有个div没有关闭标签
[Vue warn]: Error compiling template: vue 编译模板错误
热门推荐
马一文
11-08 2万+
[Vue warn]: Error compiling template: &lt;div id="app"&gt; &lt;ul class="loginul"&gt; &lt;li&gt; 登陆账号：&lt;input type="text" id="userCode" value="{{user.userCode}}" name="use
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值