How to change the props value in order to close the vs-popup in the context of VueJS

Question

I am using Vuesax vs-popup, and i am trying to close the vs-popup on button click which is used inside the vs-popup.

Vspopup.vue

 <div v-show="active" ref="con" :class="[`vs-popup-${color}`,{'fullscreen':fullscreen}]" class="vs-component con-vs-popup" @click="close($event,true)">
        <header :style="styleHeader" class="vs-popup--header">
          <div class="vs-popup--title">
            <h3>{{ title }}</h3>
            <slot name="subtitle" />
          </div>
          <vs-icon v-if="!buttonCloseHidden" ref="btnclose" :icon-pack="iconPack" :icon="iconClose" :style="stylePopup" class="vs-popup--close vs-popup--close--icon" @click="close"/>
        </header>
    ...
      methods:{
        close(event,con){
          if(con){
            if(event.target.className
              && event.target.className.indexOf
              && event.target.className.indexOf('vs-popup--background')!=-1){
              this.$emit('update:active',false)
              this.$emit('close', false)
            } else if(!this.buttonCloseHidden && event.srcElement == this.$refs.btnclose.$el){
              this.$emit('update:active',false)
              this.$emit('close', false)
            }
          }
        }

Component.vue:

<vs-button  class="button"  @click="showPopup= true">Open popup</vs-button>
 <vs-popup title="Want to close by button" :active.sync="showPopup">
      <vs-button  class="close btn"  @click="showPopup= false" >Cancel btn</vs-button>
  </vs-popup>
  ....
  data () {
      return {
          showPopup: false
      }
  }

I am trying to close the vs-popup by using the cancel button, but i don't know how to do it, went through the documentation of vs-popup in Vuesax and actually came to know that it can be done by changing the props value. Here is the documentation: https://lusaxweb.github.io/vuesax/components/popup.html

Please help me if someone knows how to do it.

Answer 1

I found the answer myself, if anyone looking to have an accept or cancel button inside the Modal window then you can probably use the Dialogs from vuesax and here is the link of the documentation: https://lusaxweb.github.io/vuesax/components/dialog.html

And Please look at these questions to know more about mutating of props:

• Avoid mutating a prop directly since the value will be overwritten
• vuejs update parent data from child component

Here, i could solve the issue just by implement method, the code is given below:

<vs-button  class="button"  @click="showPopup= true">Open popup</vs-button>
 <vs-popup title="Want to close by button" :active.sync="showPopup">
      <vs-button  class="close btn"  @click="closeBtn($event)" >Cancel btn</vs-button>
  </vs-popup>
  ....
  data () {
      return {
          showPopup: false
      }
  }
    methods: {
     closeBtn(event) {
         return this.showPopup= false
     }
  }

Thank you, and i hope this might help you.