vue 数据变化了视图没变

Question

原数组 data:[{id:1, name:'北京'},{id:2, name: '上海'}]

<ul v-for="city in cityList" :key="id">
   <li>{{cite.name}}</li>
</ul>

打印出

北京
上海

更新数组后为data:[{id:2,name:'上海'},{id:1, name: '北京'}]
还是原来的v-for循环，但是打印出来的还是

北京
上海

但是我们期望的是

上海
北京

这是哪里有问题吗？？

Answer 1

你改id没用啊，数据又不是根据id排序的，你需要在修改之后对数据重新进行排序

data.sort((a,b)=>{
    return a['id'] - b['id']
})

Answer 2

1. :key="id" -> :key="city.id"
2. <li>{{cite.name}}</li> -> <li>{{city.name}}</li>

Answer 3

评论区里面给出了答案，如果是直接修改数组:

data[0] = {id:2,name:'上海'};
data[1] = {id:1, name: '北京'};

或者按照您的方式，是不会被Vue框架监听并实现双向数据绑定的。需要用JS中数组的内置方法：

push、shift、unshift、pop、split...

等等

Answer 4

cite是什么