Back

Technologies:

javascriptjavascript
vue.jsvue.js
avatar
Tolerim
22 days ago

What is the method for implementing a once function when utilizing buefy's dialog in vuejs?

Currently, my implementation includes the use of buefy's dialog confirm feature in my code. Within the methods block, there are two asynchronous functions, "saveButton" and "saveAPI". The dialog confirm feature has several settings, which allow users to set custom messages and buttons. However, due to a known issue, rapidly pressing the enter key twice causes the code to save twice. 


  methods: {

    async saveButton () {
        var self = this
        this.$dialog.confirm({
          message: 'SAVE',
          canCancel: ['escape', 'button'],
          cancelText: 'CANCEL',
          confirmText: 'OK',
          onConfirm: function () {
            self.saveAPI()
          },
          onCancel: function () {
          }
        })
     },
    async saveAPI() {
      try {
        let data = await API.saveAPI
        return data
      } catch (error) {
      }
    }
  }
Unlike my custom confirmation window that utilizes the "@keyup.enter.once" feature provided by Vue JS, I am unsure of how to prevent the double-saving issue with buefy's confirmation window. I have already searched through the API properties provided by buefy without any success. Is there any way to make buefy's confirmation window work only once?

Answers(2)
avatar
Vogi
22 days ago
Verified Answer
I understand that you are using buefy's dialog confirm feature in your code and that you are experiencing an issue where rapidly pressing the enter key twice causes the code to save twice. You are unsure of how to prevent the double-saving issue with buefy's confirmation window and have already searched through the API properties provided by buefy without any success. I'm sorry to hear that you're having trouble with this. One way to prevent the double-saving issue with buefy's confirmation window is to disable the save button after it has been clicked once. This can be done by adding a boolean variable to your data object and setting it to true when the save button is clicked. You can then use this variable to disable the save button so that it cannot be clicked again until the saveAPI function has completed. Here's an example of how you can modify your code to implement this: 

  data () {
    return {
      isSaving: false
    }
  },
  methods: {
    async saveButton () {
      if (this.isSaving) {
        return
      }
      var self = this
      this.$dialog.confirm({
        message: 'SAVE',
        canCancel: ['escape', 'button'],
        cancelText: 'CANCEL',
        confirmText: 'OK',
        onConfirm: function () {
          self.isSaving = true
          self.saveAPI()
            .then(() => {
              self.isSaving = false
            })
            .catch(() => {
              self.isSaving = false
            })
        },
        onCancel: function () {
        }
      })
    },
    async saveAPI() {
      try {
        let data = await API.saveAPI
        return data
      } catch (error) {
      }
    }
  }
In this example, we've added a new boolean variable called "isSaving" to our data object and set it to false by default. When the save button is clicked, we check if "isSaving" is true and return early if it is. If "isSaving" is false, we set it to true and call "saveAPI". Once "saveAPI" has completed, we set "isSaving" back to false so that the save button can be clicked again. I hope this helps! Let me know if you have any other questions.
avatar
Tolerim
22 days ago
One way to solve this issue is by adding a property called isConfirming to your component's data object and setting it to true when the confirm dialog is opened. Then, before calling the saveAPI() function, you can check if isConfirming is already true. If it is, then do not call saveAPI(). Here's an example of how you can modify your existing code to implement this solution: 
methods: {
  data() {
    return {
      isConfirming: false
    }
  },

  async saveButton() {
    var self = this
    this.$dialog.confirm({
      message: 'SAVE',
      canCancel: ['escape', 'button'],
      cancelText: 'CANCEL',
      confirmText: 'OK',
      onConfirm: function () {
        self.isConfirming = true // set isConfirming to true when confirm dialog is opened
        self.saveAPI()
      },
      onCancel: function () {
      }
    })
  },

  async saveAPI() {
    if (this.isConfirming) {
      try {
        let data = await API.saveAPI
        return data
      } catch (error) {
      } finally {
        this.isConfirming = false // reset isConfirming to false when API call is finished
      }
    }
  }
}
In this example, we have added an isConfirming property to the component's data object and initialized it to false. When the confirm dialog is opened, we set isConfirming to true and call saveAPI(). Inside the saveAPI() function, we check if isConfirming is true. If it is, we execute the API call and set isConfirming back to false when the call is finished. This ensures that the API call is made only once even if the user presses enter key multiple times quickly while the confirm dialog is open.
;