Доступ к переменным данных в методе Vue для цикла - PullRequest
Новая
       23

Доступ к переменным данных в методе Vue для цикла

1 голос
/ 10 июля 2020

Я хочу получить доступ к data() переменным 


  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: []
    }
  },

в методе того же компонента. Я знаю, что мы можем назвать его индивидуально как свойство this.someVariable, но я хочу l oop по всем переменным, чтобы сбросить его значения. Поэтому вместо того, чтобы вызывать их все по одному, я думал l oop вместо data(), а затем присвоить ему нулевое значение (для сброса).

Я уже пробовал this.data и this.getData() и this.data(), но ни один из них не работает.

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Сбрасывать свойства одно за другим - плохая идея, потому что вам нужно будет проверить каждое из них, чтобы определить, какое значение вам нужно установить (null, array, boolean, et c). Вы действительно хотите, чтобы if проверял все свойства?

Лучше просто клонировать объект до того, как вы внесете в него какие-либо изменения, а затем просто сбросите все свойства сразу:

Метод 1: сохранить данные сброса локально 

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

Метод 2: сохранить данные сброса в хранилище Vuex 

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

хранилище. js

state: {
  defaultData: {}
},
mutations: {
  SET_DEFAULT_DATA (state, value) {
    state.defaultData = value
  }
}
0 голосов
/ 10 июля 2020

Что если бы вы сделали массив всех пропорций в методе данных? Пример: 

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

}

, а затем вызвать метод, который перебирает dataArray?

...