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

Question

我有一个如下所示的对话框组件：

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

以及导入上述组件的另一个组件：

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

Dialog 应该在 catch 块中调用。

如何触发catch块中的open事件？

Answer 1

只需将 ref=“userInfo” 添加到 PageIndex 组件的 HTML 模板中的 <UserInfo> 标记即可。然后你可以在catch块中调用this.$refs.userInfo.show_dialog()

Answer 2

将 confirm 属性更改为 props 而不是 data，并从父组件管理切换。

父组件：

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

子组件：

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

Answer 3

在类星体中调用对话框的正确方法

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

从您要调用的组件

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

在那之后你可能会得到错误 $q.dialog not known 所以在 quasar.js 的插件中添加对话框像这样

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

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

How to open the dialog from another component?

javascript

vue.js

quasar-framework

quasar