问题
Is there any way to load or render components into Qdialog? Please I need to know if it is possible and if any example/sample of such methods is available
EDITED A scenario.
<q-toolbar>
<q-select v-model="event" :option="eventtype" @input="onEventChange()" label="Select Event" />
</q-toolbar>
<q-dialog>
</q-dialog>
And in the script,
<script>
import eventList from 'statics/data/event.json'
export default {
data () {
return {
event: null,
dialog: false,
app: {
title: ' '
url: ' '
}
},
computed: {
eventtype () {
return eventList
}
},
methods: {
onEventChange () {
if (this.event === "New Entry" {
this.app.title = 'New Entry Form'
this.app.url = 'components/forms/newEntryForm.Vue'
} else if (this.event === "Edit Entry" {
this.app.title = 'Edit User details'
this.app.url = 'components/forms/editForm.Vue'
}
}
</script>
Question How can I use Qdialog to load either newEntryForm.vue or editForm.vue depending on event selected by the user?
回答1:
Yes possible to render components into Qdialog.
Example -
<q-dialog
v-model="customDialogModel"
stack-buttons
prevent-close
@ok="onOk"
@cancel="onCancel"
>
<span slot="title">Alert</span>
<span slot="message"><buyer-info></buyer-info></span>
</q-dialog>
methods: {
onOk(){
alert("hi")
},
onCancel(){
alert("cancle")
},
handler(){
this.customDialogModel=true
}
},
You can use dynamic component loading with computed.
Example -
computed: {
Title() {
return () => import('@/components/libs/Title.vue');
},
Status() {
return () => import('@/components/libs/Status.vue');
}
},
<component v-bind:is="Title"></component>
<component v-bind:is="Status"></component>
来源:https://stackoverflow.com/questions/59923758/is-there-any-way-to-load-or-render-components-into-qdialog