使用v-for生成的html，如果data顺序调换了，如何调换html的顺序?

Question

如上图所示，在VUE中使用v-for循环生成了左边的li序列，如果这时候stepData里面的顺序调换了，改怎么让li的顺序重新生成一遍？

stepData:

stepData: [

    {id: 228},

    {id: 229},

    {id: 232},

    {id: 233},

    {id: 234},

    {id: 235}

]

最后解决了，原来是：

Answer 1

Vue.set

Answer 2

vue不是自动去触发渲染的吗，相当于你ajax请求了，重新获取了一个stepData，来替换原有的stepData，数据的变化，触发页面的渲染

Answer 3

数组顺序调换，也会触发视图更新。具体请看文档数组更新检测

Answer 4

这个分两种情况：第一，你的li列表的样式是一样的，这个情况不需要额外的处理，只有你的data数组改变了，html自己就会相应的改变了li的排列顺序。第二，如果你的li列表的样式是不一样的，那么你就需要在循环的是再加一层判断，通过在data的数组里面再加一个type的类型，来达到自动切换html样式的需求。总的来说，就是你的html要做相应的处理，这样你修改了data的数据，html就可以自动采取对应的样式进行渲染数据。