vue cannot detect changes to arrays

When writing a Vue project, I encountered a problem. Under normal circumstances, the model layer changes, and the view layer changes accordingly. But now my model layer has been updated, and the view layer has not changed (so nervous, did I encounter the legendary bug again), I want to cry... Fortunately, the method is always more difficult than the difficulty. Du Niang finally gave me what I wanted. start sharing

The reason why Vue can monitor changes in Model state is because the JavaScript language itself provides a Proxy or Object.observe() mechanism to monitor changes in object state. However, for the assignment of array elements, vue has no way to directly monitor

this.dataArr[0] = {
  "text": "东北", 
   "value": "db"
};

Therefore, if we assign values ​​directly to array elements, the result is often tragic... Vue cannot update the View. This is the blind spot of Vue. In this place, we need to equip Vue with a pair of glasses... How to match it?

this.dataArr[0].text = '东北';
this.dataArr[0].value= 'db';

When emptying the array, this.dataArr = [];this method does not work either, you must use_this.dataArr.slice(0,_this.dataArr.length);

So here is a summary of the methods that Vue can monitor. Use these methods to manipulate the array, and Vue can monitor it. splice() push() unshife()Use these three methods to manipulate the model to update the view.

If you want to update the level of understanding why Vue can monitor the change of model state, you can learn about the Proxy or Object.observe() mechanism of JavaScript

end