javascript - 如何从另一个组件打开对话框?
问题描述
我有一个对话框组件,如下所示:
<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
块中的打开事件?
解决方案
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);
}
}
}
推荐阅读
- javascript - Dynamics CRM Online:从 Outlook App 调用时,Xrm.Page.context.client.getClient() 返回“Web”
- python - 接收类型错误:字符串索引必须是整数
- javascript - 在 index.html 之外使用 Dart 的 Google Places API
- python - Python - DEAP & SCOOP:每个节点都有不同的结果/名人堂?
- php - PHP:如何知道日期是否在当月?
- java - 使用 One-Jar 找不到主要方法
- angular - 在 TypeScript 中循环访问类型为 any 的数组时访问属性
- ios - iOS App 在发布模式下启动时崩溃,但在调试模式下不会崩溃
- oracle12c - OBIEE 新计算项 - 大于或等于
- delphi - Delphi XE6 E2008 on Inherited