vue nextTick

Question

<div class="feachName" v-for="(item,index) in listName">
<div>{{item.name}}</div>
<div v-on:click="Movedown(index)"></div>
</div>
data(){

 return {
     Textname:"底部导航模块",
 listName:[
 {name:"首页",
  column:"[栏目] 首页",
   default:"默认"
  
 },
  {name:"我要分销",
  column:"[栏目] 我要分销",
   default:"默认"
  
 },
  {name:"购物车",
  column:"[栏目] 购物车",
   default:"默认"
  
 }
 
 ]
 },
 methods:{
    Movedown:function(Index){
  if(Index!=0){
 this.$nextTick(() => {
  exchange = this.listName[Index]
       this.listName[Index] = this.listName[Index-1]
        this.listName[Index-1] = exchange
        console.log(this.listName[0].name)
  })
    }
 }
 我想点击Movedown事件交换 1 跟 2数据的位置，但是了 交换是成功了，但是页面上数据没有更新过来，我是不是吧 $nextTick理解错了？？？
 PS:我要怎么做才能让数据交换完成后，刷新的数据也会更新过来？
 
PPS：知道 是怎么 回事了
PPPS：我把this.$set(this.listName,Index,this.listName[Index]) 这个加上不要nextTick就能动态更新了,
 
 

Answer 1

嗯，你确实是理解错了。
listName 是对象，你不能直接通过 this.listName = xx 来改变页面，不会响应的。
需要使用 this.$set(), 请看vue文档 深入响应原理