如何 v-for drive canvas 标记并在 canvas 中保存内容

Question

有源代码 https://codesandbox.io/s/9lqnroooxr

如何准确地v-for驱动canvas标签？

是否有这样的class或指令？

Answer 1

slice() 不会修改原始数组，也许在最后一行你的意思是 splice().

这会创建与 arr 中的项目一样多的不同 canvas 元素：

注意：要让 vue.js 跟踪 v-for 中的哪个元素，必须指定 unique 和 stable 值为key。 只有唯一性是不够的，它必须保持相同的值关联到相同的元素，否则 vue 会混淆！

在您的情况下，当您删除条目时索引会发生变化，而 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>

如何 v-for drive canvas 标记并在 canvas 中保存内容

how to v-for drive canvas tag and save things in the canvas

canvas

vue.js

v-for