vue 数据变化了视图没变

  • Z时代
  • 2024-03-02
  • 分类：IT

vue 数据变化了视图没变

原数组 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循环，但是打印出来的还是

北京
上海

但是我们期望的是

上海
北京

这是哪里有问题吗？？

回答：

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

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

回答：

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

回答：

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

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

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

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

等等

回答：

cite是什么

以上是 vue 数据变化了视图没变 的全部内容， 来源链接： utcz.com/p/936688.html

回到顶部