有什么方法可以将组件加载或渲染到 Qdialog 中吗？

Question

有什么方法可以将组件加载或渲染到 Qdialog 中吗？我需要知道这是否可能以及是否有任何 example/sample 此类方法可用

已编辑 一个场景。

<q-toolbar>
   <q-select v-model="event" :option="eventtype" @input="onEventChange()" label="Select Event" />
</q-toolbar>

<q-dialog>

</q-dialog>

并且在脚本中，

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

问题如何根据用户选择的事件使用 Qdialog 加载 newEntryForm.vue 或 editForm.vue？

Answer 1

可以将组件渲染到 Qdialog 中。

示例 -

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

您可以使用计算的动态组件加载。

示例 -

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>

有什么方法可以将组件加载或渲染到 Qdialog 中吗？

Is there any way to load or render components into Qdialog?

quasar

quasar-framework