Vue data rendering encountered a bug

problem description

vue project 

,

clipboard.png

datacashData,,item,
clipboard.png,v-forcashData,
clipboard.png,:
clipboard.png
,
clipboard.png
,showProInfoFlagfalse,
clipboard.png
but print through the console and find that the data has actually changed. Is vue not listening?

Vue.js javascript
Oct.21,2021

because Vue cannot detect ordinary new properties
the problem lies in the following sentence: 

this.cashData.forEach((item)=>{
    item.showProInfoFlag = true;
})

because you declare the value of cashData in data , cashData is already responsive this.cashData = data the sentence vue will recursively wrap the data into responsive data
, but before your data data should not have this showProInfoFlag value, so there is no monitoring here, through item.showProInfoFlag .

can be summarized as follows: 

this.cashData = 1 
// cashData 

this.cashData = {}
this.cashData.showProInfoFlag = 1;
// vueshowProInfoFlag 

this.cashData = {showProInfoFlag:''}
this.cashData.showProInfoFlag = 2;
// vueshowProInfoFlag

as soon as you change places: 

data.forEach((item)=>{
    item.showProInfoFlag = true;
})
this.cashData = data;

or: 

this.cashData.forEach((item)=>{
    this.$set(item,'showProInfoFlag',true)
})

upstairs, because objects in vue are hijacked by data, it has a special $set method to deal with object assignment

this is a pit in VUE, but there are detailed instructions in the VUE official documentation. Read the document carefully when you have time

VUE data Synchronize actually redefines the get and set methods for each attribute during initialization. When the data changes, vue can detect that the attributes it adds asynchronously can only be added through the vue.set method to add the set and get methods, and can be captured by vue. The boss of the method has already provided.

you can see from your screenshot that store_list is an array. Assigning values to elements in an array in Vue does not trigger a responsive update of Vue. To change the value of an array element, refer to the following link: https://www.cnblogs.com/xiaol. to change the value of the array element with the following link: update.
vue official website documentation also has relevant instructions: ide/list.html-sharp%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.
hopes to help you.

Previous: When a form is submitted in vue-element-admin, the check box submits data. How can an array of fields be converted to a string?

Next: Node fs.readFileSync read file report could not find path

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
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-1eb1c78-2378.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-1eb1c78-2378.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?