如何从另一个组件打开对话框？

Question

I have a dialog component that looks as follow:

<template>
  <q-dialog v-model="confirm" persistent>
    <q-card>
      <q-card-section class="row items-center">
        <span class="q-ml-sm">You must register</span>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="Save" color="primary" v-close-popup/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  export default {
    name: 'UserInfo',
    data() {
      return {
        confirm: false,
      }
    },

    created: function () {

    },
    methods: {
      show_dialog() {
        this.confirm = true;
      }

    }
  }
</script>

And another component that import the component above:

<template>
  <div class='q-pa-md' style='max-width: 300px'>
    <UserInfo></UserInfo>
  </div>
</template>


<script>
  import UserInfo from "pages/UserInfo";

  export default {
    name: 'PageIndex',
    components: {UserInfo},
    data() {
      return {

      }
    },
    mounted() {

    },
    created: function () {
      const config = {
        headers: {
          'Authorization': `Bearer ${this.$kc.token}`,
          'Content-Type': 'application/json',
        }
      };

    console.log(this.$kc);


      this.$axios.get(`http://localhost:9090/user/${this.$kc.subject}`)
        .then((res) => {
          console.log(res)
        })
        .catch(_ => {
          //Here the dialog should open
        })

    },
    methods: {

    }
  }
</script>

The Dialog should get called in the catch block.

How to trigger the open event in the catch block?

Answer 1

Change the confirm property to props instead of data , and manage the toggle from the father component.

father component:

<template>
  <div class='q-pa-md' style='max-width: 300px'>
    <UserInfo :confirm="isConfirm" @changeConfirm="changeConfirm"></UserInfo>
  </div>
</template>


export default {
   data() {
       return {
          isConfirm: ''
       }
   },
   methods: {
       changeConfirm(status) {
           this.isConfirm= status
       }
   },
   created: function () {
      //...
      this.$axios.get(`http://localhost:9090/user/${this.$kc.subject}`)
        .then((res) => {
           console.log(res)
         })
        .catch(_ => {
            this.isConfirm= false
     })
   }
}

child component:

export default {
    props: {
       confirm: ''
    },
    methods: {
       show_dialog() {
         this.$emit('changeConfirm', true);
       }
    }
}

Answer 2

Just add ref=“userInfo” to the <UserInfo> tag in the HTML template of the PageIndex component. Then you can call this.$refs.userInfo.show_dialog() in the catch block

Answer 3

Proper way to call dialogs in quasar

<template>
  <q-dialog v-model="confirm" ref="dialog" persistent>
    <q-card>
      <q-card-section class="row items-center">
        <span class="q-ml-sm">You must register</span>
      </q-card-section>
      <q-card-actions align="right">
          <q-btn flat label="Save" color="primary" @click="onOKClick"/>
          <q-btn flat label="Cancel" color="primary" @click="onCancelClick"/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  export default {
    name: 'UserInfo',
    data() {
      return {
        confirm: false,
      }
    },

    created: function () {

    },
    methods: {
      show() {
            this.$refs.dialog.show();
        },
        hide() {
            this.$refs.dialog.hide();
        },
        onDialogHide() {
            this.$emit("hide");
        },
        onOKClick() {
            //code that you want to emit or functionality you want 
        },
        onCancelClick() {
            this.hide();
        }
    }
  }
</script>

From component you want to call

<template>
  <div class='q-pa-md' style='max-width: 300px'>
    
  </div>
</template>


<script>
  import UserInfo from "pages/UserInfo";

  export default {
    name: 'PageIndex',
    components: {UserInfo},
    data() {
      return {

      }
    },
    mounted() {

    },
    created: function () {
      const config = {
        headers: {
          'Authorization': `Bearer ${this.$kc.token}`,
          'Content-Type': 'application/json',
        }
      };

    console.log(this.$kc);


      this.$axios.get(`http://localhost:9090/user/${this.$kc.subject}`)
        .then((res) => {
          console.log(res)
        })
        .catch(_ => {
          //Here the dialog should open
                this.$q
                .dialog({
                    component: UserInfo,
                    parent: this,
                })
                .onOk(value => {
                    //Functionality you want on OK click of dialog
                })
                .onCancel(() => {})
                .onDismiss(() => {});
        })

    },
    methods: {

    }
  }
</script>

After that maybe you will get error of $q.dialog not known so add Dialog in your Plugins in quasar.js like this

import { Quasar, Dialog } from 'quasar'
plugins: [
        Dialog
    ],