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
– Elvaleryn, Commented Jul 10, 2020 at 13:11

AlekseyHoffman · Accepted Answer · 2020-07-10 12:37:01Z

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

Rasmus J. · Accepted Answer · 2020-07-10 12:13:35Z

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, 2020 at 12:13

Rasmus J.

211 bronze badge

2 Comments

ulou Over a year ago

Is this a VueJS? You forgot about question tags. Please add them, otherwise we do not know what language/framework is this.

ulou Over a year ago

Also please check this question: stackoverflow.com/questions/46491468/… It might be an answer for yours.

Collectives™ on Stack Overflow

Accessing data variables in Vue method for a loop

2 Answers 2

Method 1: store reset data locally

Method 2: store reset data in Vuex store

store.js

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Method 1: store reset data locally

Method 2: store reset data in Vuex store

store.js

Comments

2 Comments

Linked

Related