Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vuesax dialogs are invoking accept alert automatically #251

Closed
yathindrak opened this issue Sep 23, 2018 · 8 comments
Closed

Vuesax dialogs are invoking accept alert automatically #251

yathindrak opened this issue Sep 23, 2018 · 8 comments
Labels
good first issue Good for newcomers help wanted Extra attention is needed

Comments

@yathindrak
Copy link

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.

capture

@luisDanielRoviraContreras
Copy link
Member

luisDanielRoviraContreras commented Sep 23, 2018

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

@vs-accept="myFunction"

...

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

@yathindrak
Copy link
Author

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
Copy link
Member

@yathindra123 Add all the code to understand you better

@luisDanielRoviraContreras luisDanielRoviraContreras added help wanted Extra attention is needed good first issue Good for newcomers labels Sep 25, 2018
@charleswongzx
Copy link

charleswongzx commented Feb 14, 2019

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
Copy link

ashleymoogle commented Feb 15, 2019

Same bug for me, on top of that I have errors like on this issue: #291
That might be linked

@diniremix
Copy link

same bug for me, 😢
code
Imgur

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

@luisDanielRoviraContreras
Copy link
Member

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

6 participants