SoFunction
Updated on 2025-04-05

How to clear objects in Vue

Vue clears objects

JS clears objects

Use the literal method to point to a new object:

var obj = {
    name: 'Lee',
    age: 20
};
obj = {};
var obj = {
    name: 'Lee',
    age: 20
};
for(var key in obj){
    delete obj[key];
}

Vue clears objects

Use object literals, not recommended.

<div >
    <button @click="deleteInfo">delete</button>
    Name：{{  }},
    age：{{  }}
</div>
var app = new Vue({
    el: '#app',
    data: {
        message:{
            name:"Lee",
            age: 20
        }
    },
    methods:{
        deleteInfo:function(){
                = {};
        }
    }
})

use :

<div >
    <button @click="deleteInfo">delete</button>
    Name：{{  }},
    age：{{  }}
</div>
var app = new Vue({
    el: '#app',
    data: {
        message:{
            name:"Lee",
            age: 20
        }
    },
    methods:{
        deleteInfo:function(){
            for(let key of ()){
                (,key);
            }
        }
    }
})

Clear the vule value for a certain object and keep the key

This is to copy the properties of one object to another object

In vue

  • this.$dataGet the data in the current state
  • this.$()Get the data in the initial state of this component

Therefore, you can copy the data in the initial state to the data in the current state

Implement reset effect:

(this.$data, this.$())

Of course, if you only want to reset an object or property in data: (usually used to clear data on the form)

 = this.$().form

Clear the vule value for a certain object and keep the key

(form).forEach((key) => (form[key] = ''))

The above is personal experience. I hope you can give you a reference and I hope you can support me more.