canvas - 如何 v-for 驱动画布标签并将内容保存在画布中
解决方案
slice()
不修改原始数组,也许在最后一行你的意思是splice()
.
这将创建与以下项目一样多的不同画布元素arr
:
注意:要让vue.js跟踪. v-for
_ 仅有唯一性是不够的,它必须保持与相同元素关联的相同值,否则 vue 会混淆!key
在您的情况下,删除条目时索引会更改,而item
是标识元素的值。所以你必须指定:key="item"
.
var app = new Vue({
el: '#app',
data () {
return {
arr: [],
};
},
created: function () {
let arr = [];
arr.push({id:1});//have one canvas and draw things in the canvas
arr.push({id:2});//have new canvas and also draw things in the canvas
arr = arr.slice(0,1);//delete first element, the related canvas and other canvas are disordered
arr.splice(0,0,{id:3});//canvas tags show same disordered
console.log(arr);
this.arr = arr;
}
})
canvas {
width: 300px;
height: 150px;
border: 1px solid green;
margin: 10px;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<canvas v-for="(item,index) in arr" :key="item"></canvas>
</div>
推荐阅读
- selenium-webdriver - 使用 DataProvider 和 TestNG 显示错误 [Utils] [ERROR] [Error] java.lang.NullPointerException
- mysql - 我有一个主表和一个来自 sql 查询的结果。如何加入这些主表和一个结果集以获取丢失的 ID
- c# - Moq 测试实体框架
- sql - SQL Server 查询对多列进行排序
- flutter - 复杂 Firestore 规则的意外行为
- python - 我如何从 .txt 文件中选择 2 张随机卡片,然后确保这些卡片不再使用?(Python)
- python - 将 tkinter 脚本转换为 .exe 文件后,尝试执行时出现错误:ModuleNotFoundError: No module named 'numpy'
- python - Pandas 系列仅将 NaN 填充到一定限制
- reactjs - Material UI:如何使用按钮的 onClick 事件获取滑块值?
- java - 如何在 Eclipse 项目中设置默认下载目录以下载 .pdf 文件?