Vue, v-if binds to an object in data, changes the properties of the object, and does not update dom

//html

<img v-if="value.exist" v-for="(value, name) in picsList">
 
//vmdata
data: {
  picsList: {
    name1:
    {
      exist: true
    },
    name2:
    {
      exist: true
    }
  }
}

//
Vue.set(vm.picsList["name1"], "exist", false)

//
data: {
  picsList: {
    name1:
    {
      exist: false
    },
    name2:
    {
      exist: true
    }
  }
}

//img

//
Jun.13,2021

directly modify vm.picsList.name1.exist = false


it is recommended to return a new object and use Object.assign () to return a new picsList []. It seems that vue cannot listen for changes in internal attributes


problem has been found! The reason is that vue cannot monitor the addition or deletion of object attributes. You need to use Vue.delete operation


VFT if = "value.exist" where is the value?


v-for remember to add key

<img v-if="value.exist" :key="name" v-for="(value, name) in picsList">

when I encounter a situation similar to yours, you can take a look at this due to JavaScript restrictions, Vue cannot detect the following changing arrays

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b6ab-4eef7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b6ab-4eef7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?