Is there a proper way of resetting a component’s initial data in vuejs?

  1. extract the initial data into a function outside of the component
  2. use that function to set the initial data in the component
  3. re-use that function to reset the state when needed.
// outside of the component:
function initialState (){
  return {
    modalBodyDisplay: 'getUserInput', 
    submitButtonText: 'Lookup', 
    addressToConfirm: null,
    bestViewedByTheseBounds: null,
    location:{
      name: null,
      address: null,
      position: null
    }
  }
}

//inside of the component:
data: function (){
    return initialState();
} 


methods:{
    resetWindow: function (){
        Object.assign(this.$data, initialState());
    }
}

Leave a Comment