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

//
Vue.js javascript
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

Previous: On the problem of monitoring page change and regular crawling increment

Next: How does phpstorm debug code through docker?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu