How to open the dialog from another component?

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);
       }
    }
}