Run function if other end Vue, JS

Question

I'm don't know how to run code if other end

Function showAvailableTable refresh item and add data to vuex $store

I need to run code from ////START to //// END if showAvailableTable() done correctly(axios add data to $store)

how should I do it correctly?

showAvailableTable () {
  var obj = this.firstStepData
  var nullCount = 0
  var self = this
  for (var key in obj) {
    if (obj.hasOwnProperty(key) && obj[key] == null) {
      nullCount++
    }
  }
  if (nullCount === 0) {
    var reservationId = this.firstStepData.restaurant.id
    var restaurantSize = this.firstStepData.tableSize.value
    var reservationDate = this.firstStepData.reservationDate
    var reservationTime = this.firstStepData.reservationTime
    axios
      .get(self.$store.state.apiUrl + 'reservation/tables/?size=' + restaurantSize + '&restaurant_id=' + reservationId + '&date=' + reservationDate + '&hour=' + reservationTime)
      .then(response => {
        this.$store.commit('updateRestaurantTableList', response.data)
      })
      .catch(error => {
        console.log(error)
      })
    this.$store.commit('updateShowTable', true)
  }
},

Next function, this function booking table, I'm run this.showAvailableTable() to refresh data in $store

firstStepBook (event, id) {
  this.showAvailableTable()
  ///////////////////START
  var isResData = false
  this.dataLoading = true
  for (var obj in this.restaurantTableList) {
    if (this.restaurantTableList[obj].id === id) {
      if (this.restaurantTableList[obj].res_tab.length > 0) {
        isResData = true
      }
      break
    }
  }
  if (isResData && !event.currentTarget.classList.contains('isSelected')) {
    alert('someone is booking this table, choose another one')
  } else {
    if (event.currentTarget.classList.contains('isSelected')) {
      this.deleteTmpReservation(this.reservationTmp.id)
      this.dataLoading = false
    } else {
      if (this.reservationTmp.id !== undefined) {
        this.deleteTmpReservation(this.reservationTmp.id)
        this.dataLoading = false
      }
      var self = this
      axios.post(self.$store.state.apiUrl + 'reservation/', {
        restaurant_table: id,
        clients_number: self.firstStepData.tableSize.value,
        reservation_time: self.firstStepData.reservationTime,
        reservation_date: self.firstStepData.reservationDate
      })
        .then(function (response) {
          self.showAvailableTable()
          self.$store.commit('updateReservationTmp', response.data)
          self.dataLoading = false
        })
        .catch(function (error) {
          console.log(error)
        })
      //this.$store.commit('updateStep', 2)
    }
  }///////////////////END
},

thank you in advance

Perhaps make `showAvailableTable` return a promise and wrap your code inside `showAvailableTable().then(...)` — Richard Matsen, Nov 15 '18 at 22:12
Probably better to use [Vuex - subscribe](https://vuex.vuejs.org/api/#subscribe) to react to the store changes. — Richard Matsen, Nov 15 '18 at 22:16
See this question [Returning an Axios Promise from function](https://stackoverflow.com/questions/43463989/returning-an-axios-promise-from-function) and follow the pattern of `createRequest1()`. — Richard Matsen, Nov 16 '18 at 18:34
Actually @SLaks has the simplest idea, put `///START ... ///END` into a method and call it straight after `this.$store.commit('updateRestaurantTableList'...`! The problem with my methods is you have to work out how to pass `event` and `id` to the next bit of code. — Richard Matsen, Nov 16 '18 at 18:39

score 1 · Answer 1 · answered Nov 15 '18 at 22:25

This might suit you if the mutation is only called within showAvailableTable()

Ref Vuex subscribe

mounted() {
  this.$store.subscribe((mutation, state) => {
    if (mutation.type === 'updateRestaurantTableList') {
      ///////////////////START
      ...
      ///////////////////END
    }
  })
},
methods: {
  firstStepBook (event, id) {
    // call to updateRestaurantTableList triggers above subscription
    this.showAvailableTable()  
  }
}

Run function if other end Vue, JS

1 Answers1