SoFunction
Updated on 2025-04-04

Several solutions for the Vue data update view not updated

1. Problem description

In Vue projects, sometimes we encounter data updates, but the view does not update. This is because Vue uses asynchronous update method. If the view does not respond immediately when the data changes, the following solutions will generally be considered:

  • Solution 1: UsewatchListen to object properties changes
<template>
    <div>
        <h3>{{}}</h3>
        <button @click="changeUserName">Click me to change the username</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            userInfo: {
                name: 'Zhang San',
                age: 16
            }
        }
    },
    watch:{
        '': {
            handler(newValue, oldValue) {
              ('The username has changed, new value:' + newValue + ', old value:' + oldValue);
            },
            immediate: true,
            deep: true
        }
    },
    methods:{
        changeUserName(){
            // Assume that the username is modified asynchronously            const newUserName = 'Li Si';
             = newUserName;
        }
    }
}
</script>
  • Solution 2: Usethis.$set()Force update of responsive variables
// Define the data object:obj: { name: "Xiao Ming", age: 18, },       

// Basic syntax:this.$set(Objects that need to be changed，"Object properties that need to be changed"，"New Value")

Examples are as follows:

<template>
    <div>
        <h3>{{}}</h3>
        <button @click="changeMessage">Click me to changemessagevalue</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            initList: {
                message: 'hello'
            },
        }
    },
    methods:{
        changeMessage(){
            // Assuming that the asynchronous call has obtained a new message value            const newMessage='world';
            this.$set(, 'message', newMessage);
        }
    }
}
</script>
  • Solution 3: Usethis.$forceUpdate(）Forced re-rendering
methods: {
    // In some cases, component re-rendering is required    forceRerender() {
        // Call the $forceUpdate() method        this.$forceUpdate();
    }
}

However, in the project, if all the above schemes are invalid, for example, because they cannot be usedwatchorthis.$set()Implementing the required functions, or using them will make the code more complex and redundant; at the same time, too many levels or other reasons will causethis.$forceUpdate(）It doesn't work either, so what other solutions can solve the problem of not updating the view?

2. Solution

To ensure that the view is updated, you can assign the data first and then clear it, and finallythis.$nextTick()Process the data and reassign the value. The code example is as follows:

// To ensure that the view is updated, reassign the data to a variable first, and then clear itconst details = ;
 = [];

// Process the data and reassign the valuethis.$nextTick(() => {
    // Process data    const detailsList = (details, );
    // Reassign value     = ([], detailsList);
})

At this time, while the data is updated, the view will also be updated synchronously.

Remark:
In my project, because there are too many hierarchical loops, none of the above three solutions work. Only the last solution can solve the problem of not updating the view.

I hope the above will be helpful to everyone!

This is the end of this article about several solutions for the Vue data update view not being updated. For more related content about the Vue data update view not being updated, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!