Original address: github.com/Daotin/fe-b… You can also find me at:

  • Making (a star! ✨ ✨ ✨)
  • CSDN
  • Blog garden
  • The Denver nuggets
  • Wechat official account: Front-end Captain

Today, I encountered a problem that Vue data was updated, but the view was not updated. It took me 2 hours to solve the problem. It is necessary to record it to prevent me from stepping on the pit again in the future.

Problem description

I need to display a list, and the list is editable. For example, you can change the name of each item in the list.

After I get the list from the back end, I initialize each item of data and add an editing attribute.

me.groupList.forEach(item= >{
    item.editing = false;
});
Copy the code

Then use v-for to iterate through the groupList in the template and add an icon to each item. Click icon to modify the editing state and display the item name or input tag according to the editing state.

However, I found that using vue.set did not update the page, adding this.$forceUpdate() did.

menuEdit(menu) {
    this.$set(menu, 'editing'.true);
    console.log('edting----->', menu.editing); // You can print out that the data has been updated
    // this.$forceUpdate(); // Add the view to update
},
Copy the code

$set = null; $set = null; $set = null; $set = null; $set = null; $set = null;

So we have to resort to search engines.

While searching the web, I found people asking, why is the data updated, but not in Vue Devtools?

Here’s the link:

  • Stackoverflow.com/questions/4…
  • Stackoverflow.com/questions/4…
  • Github.com/vuejs/vue-d…

In fact, if there is no responsive content on the page, that is, the page does not use responsive data or uses non-responsive data, the data will not be updated in real time in Vue Devtools, but you can click the refresh button of the tool and see the data updated.

The interlude is over.

Problem solving

When I was at a loss, I suddenly found that at the beginning of the initial editing is directly assigned value, I knew at that time a shock, the problem is here.

me.groupList.forEach(item= >{
    this.$set(item, 'editing'.false);
});
Copy the code

After changing the above code, the problem is solved.

conclusion

  • The problem is a small one, and one I know of. Just did not expect it to make a mistake in the most root place, even if the correct operation behind, but also useless.
  • Believe when usingthis.$forceUpdate()You’re wrong 99% of the time.
  • Vue DevTools data is not updated if the page does not use responsive data, or if it uses non-responsive data.