鍍金池/ 問(wèn)答/HTML/ vue, v-if綁定到data里一個(gè)對(duì)象, 改變?cè)搶?duì)象屬性, 沒(méi)有更新dom

vue, v-if綁定到data里一個(gè)對(duì)象, 改變?cè)搶?duì)象屬性, 沒(méi)有更新dom

//html內(nèi)容

<img v-if="value.exist" v-for="(value, name) in picsList">
 
//vm實(shí)例內(nèi)data內(nèi)容
data: {
  picsList: {
    name1:
    {
      exist: true
    },
    name2:
    {
      exist: true
    }
  }
}

//執(zhí)行操作
Vue.set(vm.picsList["name1"], 'exist', false)

//結(jié)果
data: {
  picsList: {
    name1:
    {
      exist: false
    },
    name2:
    {
      exist: true
    }
  }
}

//然而img元素并沒(méi)有刪除

//求指導(dǎo)
回答
編輯回答
半心人

v-for 記得加 key

<img v-if="value.exist" :key="name" v-for="(value, name) in picsList">
2017年5月2日 13:33
編輯回答
我以為

v-if="value.exist" 這個(gè)value在哪里?

2017年10月19日 22:34
編輯回答
兔寶寶

建議返回一個(gè)新對(duì)象 ,使用Object.assign()返回一個(gè)新的picsList[],vue中貌似不能監(jiān)聽內(nèi)部屬性的變化

2018年5月9日 18:51
編輯回答
怣人

直接修改試試 vm.picsList.name1.exist = false

2018年5月10日 09:41
編輯回答
妖妖

問(wèn)題發(fā)現(xiàn)了!原因是vue無(wú)法監(jiān)視對(duì)象屬性的增刪,需要通過(guò)Vue.delete操作

2017年9月11日 18:56