Cannot use v-for on stateful component root element because it renders multiple elements.
<template name:trailerStars>
<image v-for="yellow in yellowScore"
src="../static/icos/star-yellow.png" class="star-ico">
</image>
<image v-for="gray in grayScore"
src="../static/icos/star-gray.png" class="star-ico">
</image>
</template>
错误原因:
不能在根元素(root element)使用 v-for,因为v-for是个循环体呈现多个元素,v-for在根元素上导致无法渲染。
解决方案:
将元素包裹到另外的标签中:
<template name:trailerStars>
<view>
<image v-for="yellow in yellowScore"
src="../static/icos/star-yellow.png" class="star-ico">
</image>
<image v-for="gray in grayScore"
src="../static/icos/star-gray.png" class="star-ico">
</image>
</view> </template>
参考链接:https://blog.csdn.net/hua_ban_yu/article/details/80256611
Cannot use v-for on stateful component root element because it renders multiple elements.的更多相关文章
- Ejb3 + Jboss8 出现Session id hasn't been set for stateful component
Ejb 3 + JBoss 8 在使用客户端远程访问有状态的Ejb对象时,出现ERROR: Session id hasn't been set for stateful component 出现该 ...
- VUE之命令行报错: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 解决办法
Failed to compile. ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5992 ...
- VUE编译报错 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
背景: 在使用VUE添加标签的时候编译报错,报错如下: Component template should contain exactly one root element. If you are u ...
- vue报错: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.
在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...
- AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template
.controller('HomeController', function($scope,$location) { $scope.userName='天下大势,为我所控!'; $scope.clkU ...
- Caused by: org.xml.sax.SAXParseException; systemId: file:/home/hadoop/hive-0.12.0/conf/hive-site.xml; lineNumber: 5; columnNumber: 2; The markup in the document following the root element must be well
1:Hive安装的过程(Hive启动的时候报的错误),贴一下错误,和为什么错,以及解决方法: [root@master bin]# ./hive // :: INFO Configuration.de ...
- which had no Root Element. This likely means the XML is malformed or missing
今天按照古月老师的步骤,想在RViz中配置插件. 按步骤做下来后,一运行,出现如下错误: [E[ERROR] [1523370744.057263390]: Skipping XML Document ...
- maven web项目的web.xml报错The markup in the document following the root element must be well-formed.
maven项目里面的web.xml开头约束是这样的 <?xml version="1.0" encoding="UTF-8"?> <web-a ...
- Possible overdraw: Root element paints background @drawable/happy with a theme that also paints a background (inferred theme is @style/AppTheme)
安卓界面插入背景图片,当图片内存太大时,界面在切换时会加载失败,这是什么原因呢?这是设置android:background属性时发出的warning: Possible overdraw: Root ...
- [React] Write a stateful Component with the React useState Hook and TypeScript
Here we refactor a React TypeScript class component to a function component with a useState hook and ...
随机推荐
- 2023-03-08:x265的视频编码器,不用ffmpeg,用libx265.dll也行。请用go语言调用libx265.dll,将yuv文件编码成h265文件。
2023-03-08:x265的视频编码器,不用ffmpeg,用libx265.dll也行.请用go语言调用libx265.dll,将yuv文件编码成h265文件. 答案2023-03-08: 使用 ...
- 2022-12-22:给定一个数字n,代表数组的长度, 给定一个数字m,代表数组每个位置都可以在1~m之间选择数字, 所有长度为n的数组中,最长递增子序列长度为3的数组,叫做达标数组。 返回达标数组的
2022-12-22:给定一个数字n,代表数组的长度, 给定一个数字m,代表数组每个位置都可以在1~m之间选择数字, 所有长度为n的数组中,最长递增子序列长度为3的数组,叫做达标数组. 返回达标数组的 ...
- 浅谈 OI 中各种合并操作
前言 合并操作一直是 OI 中一大考点,今天请各位跟着笔者来梳理一下各种合并操作. 启发式合并 几乎可以说是最经典的合并了. 假定我们可以在 \(O(k)\) 的时间内往某个集合中插入一个数,那么我们 ...
- T-SQL——批量刷新视图
目录 0. 背景说明 1. 查询出所有使用了指定表的视图并生成刷新语句 2. 创建存储过程批量刷新 3. 刷新全部的视图 4. 参考 shanzm--2023年5月16日 0. 背景说明 为什么要刷新 ...
- Metabase可视化BI系统部署安装及简单使用
Metabase 是国外开源的一个可视化系统,语言使用了Clojure + TypeScript. Clojure(/ˈkloʊʒər/)是Lisp程式語言在Java平台上的現代.動態及函數式方言.来 ...
- GroundingDINO(一种开集目标检测算法)服务化,根据文本生成检测框
背景 最近发现一个叫GroundingDINO的开集目标检测算法,所谓开集目标检测就是能检测的目标类别不局限于训练的类别,这个算法可以通过输入文本的prompt然后输出对应的目标框.可以用来做预标注或 ...
- hvv蓝初面试常见漏洞问题(上)
1.SQL注入 漏洞成因: 可控变量 变量会带入数据库查询 变量不存在过滤或者变量过滤不严格 注入流程 判断是否有注入点 order by 判断字段数量 union select 报错查看注入点 使用 ...
- 让你的代码动起来:Python进度条神器tqdm详解及应用实例
各位Python高手,今天我要给大家介绍一个好用的库,它就是:tqdm tqdm在阿拉伯语中的意思是 "进展",所以这个库也被称为 "快速进展条".不得不说,这 ...
- Vue3从入门到精通(一)
Vue3简介 Vue3是Vue.js的最新版本,于2020年9月18日正式发布.Vue3相比Vue2有很多改进和优化,包括但不限于: 更快的渲染速度:Vue3通过使用Proxy代理对象和优化虚拟DOM ...
- 华为IP综合实验
目录 实验拓扑 实验需求 实验步骤 1.配置IP地址和环回口地址 2.在总公司上进行相应VLAN划分与配置 3. SW3和SW4的互连接口启用eth-trunk,最大带宽为2G 4. SW1.SW2. ...