Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you about the changes in vue data but how to solve the page refresh problem. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Vue data changes but page refresh watch listens for data changes but the page is not refreshed

Add this.$forceUpdate () to the code for data changes

Add this.$forceUpdate (); for forced rendering to achieve the effect. Because there are too many data levels, the render function is not updated automatically and needs to be manually forced to refresh.

No changes in the data were detected.

For example:

Listening does not take effect when you change an item in an array or an element in an object.

If the array wants to trigger listening, the following methods can trigger

For example, splice (), push () and other js methods

Of course, you can also use the method this.$set (object, index, new) in vue

The this.$set () method is a method that comes with vue that assigns values to arrays and objects and triggers listening.

The first parameter is the array or object you want to change.

The second parameter is the subscript, or the element name

The third parameter is the new value

The data is changed but not automatically refreshed.

There are two buttons, and there is a number property on the button. When this value is even, the button is displayed in red.

The initial data are as follows:

"a": [{name: "one"}, {name: "two", number: 2}]

The phenomenon is as follows: when the first button is clicked, the data changes, but the interface does not refresh accordingly; this is when you click the second button and find that the second button is normal, and when the second button is refreshed, the first button is refreshed.

The reason is: a.number=undefined, which is a constant. When rendering for the first time, the class of the first button is not bound to the property number of the first object, so when the number changes, the interface refresh will not be triggered. When the second button causes the interface to refresh, the

A button will also refresh the interface. The Vue.$forceUpdate () method is provided in vue to force the interface refresh.

Come to a conclusion.

When binding properties, do not bind the properties of undefined, otherwise the interface refresh will not be triggered in time.

{{x.name}}: {{x.number}} export default {data () {return {"a": [{name: "one"}, {name: "two", number: 2}]}}, methods: {clickSpan (x) {if (! x.number) x.number = 0; x.number + = 1}}. RedNumber {color: red;} * {font-size: 20px User-select: none;} these are all the contents of this article entitled "vue data changes but how to solve the page refresh problem". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.