Есть ли способ загрузить или отобразить компоненты в Qdialog? - PullRequest
Новая
       37

Есть ли способ загрузить или отобразить компоненты в Qdialog?

0 голосов
/ 27 января 2020

Есть ли способ загрузить или отобразить компоненты в Qdialog? Пожалуйста, мне нужно знать, если это возможно, и если какой-либо пример / образец таких методов доступен

EDITED сценарий. 

<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 в зависимости от события, выбранного пользователем?

1 Ответ

1 голос
/ 27 января 2020

Да, можно рендерить компоненты в 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
    }
  },

Вы можете использовать динамическую c загрузку компонентов с вычислением.

Пример - 

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