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.

Why dont you simply put all of them into a variable inside of return then loop over that single variable? — Elvaleryn, Jul 10 '20 at 13:11

AlekseyHoffman · Accepted Answer · 2020-07-10T12:37:01.950

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
  }
}

score 0 · Answer 2 · answered Jul 10 '20 at 12:13

0

What if you made an array of all the proporties in the data-method? Example:

data() {
  name: '',
  manufacturerIds: null,
  supplierIds: null
  dataArray: [name, manufacturerIds, supplierIds]

}

and then call a method which loops over dataArray?

answered Jul 10 '20 at 12:13

Rasmus J.

11
1

Is this a VueJS? You forgot about question tags. Please add them, otherwise we do not know what language/framework is this. – ulou Jul 10 '20 at 12:57
Also please check this question: https://stackoverflow.com/questions/46491468/how-to-put-a-value-of-data-object-in-another-data-object-vuejs It might be an answer for yours. – ulou Jul 10 '20 at 12:59

Accessing data variables in Vue method for a loop

2 Answers2

Method 1: store reset data locally

Method 2: store reset data in Vuex store

store.js