как сделать v-for Drive Canvas Tag и сохранить вещи на холсте - PullRequest
Новая
       8

как сделать v-for Drive Canvas Tag и сохранить вещи на холсте

0 голосов
/ 01 мая 2018

есть исходный код https://codesandbox.io/s/9lqnroooxr

Как правильно ехать за диском меткой холста?

Существует ли такой класс или директива?

1 Ответ

0 голосов
/ 01 мая 2018

slice() не изменяет исходный массив, и, возможно, в последней строке вы имели в виду splice().

Это создает столько разных элементов холста, сколько элементов в arr:

ПРИМЕЧАНИЕ: чтобы vue.js отслеживал, какой элемент находится внутри v-for, необходимо указать уникальное и стабильное значение в качестве 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>
...