javascript - Vue列表渲染中改变DOM怎么改变绑定的数组

问题描述

问 题

我有一个table，其中的行是用v-for渲染的，现在需要实现通过拖拽更改行的位置的功能，这个用jquery操作DOM比较容易实现，但是DOM更改后如何更改数组中元素的顺序呢？
如果不更改数组的顺序，等到用v-for重新渲染的时候，table的顺序又变回来了

已经解决：

• 问题所在:

  Vue自己使用了重用DOM的优化，导致相同位置的元素会重用之前的DOM，而我所使用的Vue1.0中的``track-by="$index"``在数组元素改变位置后，``index``依旧没有改变，所以还是会按照之前的DOM顺序来渲染

• 解决办法:

  使用Vue2.0的话,使用``v-bind:key="item.id"``，这里每个数组元素的``id``应该是不同的
  使用Vue1.0的话，使用``track-by="item.id"``，这里每个数组元素的``id``也需要是唯一的。

• PS:

  可以使用ES6的``Symbol``类型，生成独一无二的``id``
  

解决方案

伪代码如下：

<ul>
  <li v-for="(item, index) of items"
      @dragged="from=index" 
      @dropped="drop(index)">{{item}}</li>
</ul>

Vue({
  data () {
    return {
      items: [1,2,3,4,5],
      from: undefined
    }
  },
  methods: {
    drop(to) {
      // 把 items 数组中第 from 个元素移动到第 to 个元素之前
      // 数组操作的代码
    }
})

有个特殊情况需要处理，拖到最后一个元素之后如何处理。如果能够获得拖拽到最后一个元素之后的事件，就单独处理这个事件，只要把 items 数组中第 from 个元素移动到最后即可。

数据中元素如何移动？无非是元素的删除和插入等数组操作。如把索引为 2 的元素移动到最后：

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
myFish.concat(myFish.splice(2, 1)) // ["angel", "clown", "sturgeon", "mandarin"]

还要注意数组操作中的一些特殊性，具体参见官方文档关于响应式原理的说明。

这篇关于javascript - Vue列表渲染中改变DOM怎么改变绑定的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！