Accessing data variables in Vue method for a loop

Question

I want to access the data() variables

  data () {
    return {
      name: '',
      manufacturerIds: null,
      supplierIds: null,
      categoryIds: null,
      productIds: null,
      minPrice: 100,
      maxPrice: 0,
      priority: 0,
      enable: true,
      active: true,
      minMargin: 0,
      position: 0,
      isLoading: false,
      suppliers: [],
      categories: [],
      manufacturers: []
    }
  },

in a method in the same component. I know we can call it individually as property this.someVariable but what I want is to loop over all the variables to reset its values. So instead of calling them all one by one, I was thinking to loop over the data() and then assign it a null value (to reset).

I already tried this.data and this.getData() and this.data() but neither of them works.

Answer 1

It's a bad idea to reset the properties one by one because you will need to check each one of them to determine what value you need to set it to (null, array, boolean, etc). Do you really want to have if checks for all the properties?

A better way is to just clone the object before you make any changes to it and then just reset all the properties at once:

Method 1: store reset data locally

data () {
  return {
    // Add a property for storing unchanged data
    defaultData: {},
    
    data: {}
    name: '',
    manufacturerIds: null,
    supplierIds: null,
    categoryIds: null,
    productIds: null,
    minPrice: 100,
    maxPrice: 0,
    priority: 0,
    enable: true,
    active: true,
    minMargin: 0,
    position: 0,
    isLoading: false,
    suppliers: [],
    categories: [],
    manufacturers: []
  }
},
created: {
  // Clone data before you make any changes
  this.cloneData()
},
methods: {
  cloneData () {
    // Method 1 (better way, but requires lodash module)
    const clonedData = lodash.cloneDeep(this.$data)
    // Method 2 (bad choice for complex objects, google "deep clone JS" to learn why)
    const clonedData = JSON.parse(JSON.stringify(this.$data))
    // Store the cloned data
    this.defaultData = clonedData
  },
  resetData () {
    // Reset the values using cloned data
    this.$data = this.defaultData
  }
}

Method 2: store reset data in Vuex store

data () {
  return {
    name: '',
    manufacturerIds: null,
    supplierIds: null,
    categoryIds: null,
    productIds: null,
    minPrice: 100,
    maxPrice: 0,
    priority: 0,
    enable: true,
    active: true,
    minMargin: 0,
    position: 0,
    isLoading: false,
    suppliers: [],
    categories: [],
    manufacturers: []
  }
},
created: {
  // Clone data before you make any changes
  this.cloneData()
},
methods: {
  cloneData () {
    // Method 1 (better way, but requires lodash module)
    const clonedData = lodash.cloneDeep(this.$data)
    // Method 2 (bad choice for complex objects, google "deep clone JS" to learn why)
    const clonedData = JSON.parse(JSON.stringify(this.$data))
    // Set the cloned data object to Vuex store
    this.$store.commit('SET_DEFAULT_DATA ', clonedData)
  },
  resetData () {
    // Reset the values using cloned data
    this.$data = this.$store.state.defaultData
  }
}

store.js

state: {
  defaultData: {}
},
mutations: {
  SET_DEFAULT_DATA (state, value) {
    state.defaultData = value
  }
}