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"]

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

回答:

Vue.Draggable,Vue 封装的 Sortable.js

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注