Vue v-for渲染列表更新不重新渲染的问题解决方案

• 2020-12-27
• 2,427
• 0

一、问题

Vue中通过V-for渲染数据如下

tableData: [{
  name: '王一',
  score: '100'
}, {
  name: '王二',
  score: '100'
}, {
  name: '王三',
  score: '100'
}, {
  name: '王四',
  score: '100'
}]

现在通过以下方法改变index为1的对象

change(){
  console.log('this is changeFuc')
  this.tableData[1] = {
    name: '王五',
    score: '99'
  },
    console.log(this.tableData)
},

经管列表已被更新，但视图并没有被重新渲染

二、以下提供多种解决方案

• 通过set方法更改

setFuc() {
  console.log('this is setFuc')
  this.$set(this.tableData,1,{
    name: '王五',
    score: '99'
  })
  console.log(this.tableData)
},

• 通过引用键名修改，但属性过多时操作复杂

keyFuc() {
  console.log('this is keyFuc')
  this.tableData[1].name= '王五'
  this.tableData[1].score= '99'
  console.log(this.tableData)
},

• 列表覆盖

listFuc(){
  console.log('this is listFuc')
  this.tableData = [{
    name: '王一',
    score: '100'
  }, {
    name: '王五',
    score: '99'
  }, {
    name: '王三',
    score: '100'
  }, {
    name: '王四',
    score: '100'
  }]
  console.log(this.tableData)
},

• 调用splice修改列表可以被Vue检测

spliceFuc(){
  console.log('this is spliceFuc')
  this.tableData.splice(1,1,{
    name: '王五',
    score: '99'
  })
  console.log(this.tableData)
},

• 通过V-if 先赋值为false，再赋值为true，使其重新渲染。值得注意的是不能马上赋值为true，赋值为true的操作需要在$nextTick中执行

vifFuc(){
  console.log('this is vifFuc')
  this.showTab = false
  this.change()
  this.$nextTick(()=>{
    this.showTab = true
  })
}