Vuesax: Vuesax dialogs are invoking accept alert automatically

[yathindrakodithuwakku]

I used vuesax dialogs with vuejs event bus. When "confDelete" event emitted as the below image, the acceptAlert method is automatically called , which has put in the accept key. But acceptAlert method should be invoked only when the user hit on accept button.

[luisDanielRoviraContreras]

For this is the method @vs-accept that an example to execute a serious function

@vs-accept="myFunction"

...

methods:{
   myFunction () {
      console.log("accept dialog")
   }
}

[yathindrakodithuwakku]

Here I am not using <vs-dialog> tags. Below mention code is only going as the template as in the vuesax documentation. so how to add @vs-accept="myFunction" in this case?

<template lang="html">
    <div class="centerx">
    </div>
</template>

[luisDanielRoviraContreras]

@yathindra123 Add all the code to understand you better

[charleswongzx]

I'd like to request reopening this. I'm facing the same issue when using the example in the documentation.

<div class="save-prompt">
            <vs-button @click="openNewPartPrompt()" size="large" icon="new_releases" color="primary" type="relief" text-color="rgb(10, 20, 30)">NEW PART</vs-button>
</div>

methods: {
            openNewPartPrompt(){
                this.$vs.dialog({
                    type:'confirm',
                    color: 'warning',
                    title: 'New Part',
                    text: 'Are you sure you want to start a new part sequence?',
                    accept: this.stateNewPart()
                })
            },

this.stateNewPart() is invoked immediately when the dialog opens, instead of waiting for the user to accept.

[ashleymoogle]

Same bug for me, on top of that I have errors like on this issue: https://github.com/lusaxweb/vuesax/issues/291
That might be linked

[diniremix]

same bug for me, 😢
code

after...
the acceptAlert method is automatically called...

[luisDanielRoviraContreras]

Vue when you execute a method in this way mymethod () executes when instantiated

to solve add a new property (parameters) that are the parameters that are going to return in the two functions accept and cancel

<template lang="html">
  <div class="centerx">
    <vs-button @click="openConfirm()" color="danger" type="gradient">Alert Primary</vs-button>
  </div>
</template>

<script>
export default {
  data:()=>({
    activeConfirm:false
  }),
    methods:{
      openConfirm(){
      this.$vs.dialog({
        type:'confirm',
        color: 'danger',
        title: `Confirm`,
        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        accept:this.acceptAlert,
        parameters: ['hello'] // <----------
      })
      },
      acceptAlert: function(parameters){  // <----------
        this.$vs.notify({
          color:'danger',
          title:'Deleted image ' + parameters[0], 
          text:'The selected image was successfully deleted'
        })
      },
    }
}
</script>

It is important that the function to be executed is only set without parentheses

...
accept:this.acceptAlert
...

[peymanforceman]

@luisDanielRoviraContreras : Thanks bro , I had the same problem and your solution was awesome