다른 엔드 Vue, JS인 경우 실행 기능

다른 엔드 Vue, JS인 경우 실행 기능

다른 쪽에서는 코드를 실행할 수 없는 경우

기능 showAvailableTable 새로 고침 항목 및 vuex $store에 데이터 추가

showAvailableTable()이 올바르게 수행된 경우 /////END 코드 실행(axios 데이터를 $store에 추가)

어떻게 하면 좋을까?

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

다음 기능, 이 기능 예약표, 내가 이것을 실행한다.showAvailableTable()을 사용하여 $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
},

미리 감사하다

돌연변이가 단지 안에서만 불린다면 이것은 당신에게 어울릴 것이다.showAvailableTable()

Ref Vuex 구독

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

참조URL: https://stackoverflow.com/questions/53328418/run-function-if-other-end-vue-js