douxiandiyo58855 2017-03-25 00:52
浏览 87
已采纳

Vue js用ajax加载模态内容

I'm using vue js with laravel, In my page i have 13 modals, I thing it's not a good idea to insert 13 modals in the same page so i put this in my blade :

<modal v-if="showModal" @close="showModal = false">
     <header slot="header" v-html="modalHeader"></header>
     <component slot="body" :is="currentBody"></component>
</modal>

And in my file.js i have this :

Vue.component('modal', require('./components/Modal.vue'));
Vue.component('StatusModal', require('./components/modals/StatusModal.vue'));
Vue.component('UserModal', require('./components/modals/UserModal.vue'));

const profile = new Vue({
    el: '#profile',
    data: {
        showModal: false,
        modalHeader: '',
        currentBody: '',
    },
    methods: {
        showStatus(){
            this.showModal = true
            this.modalHeader = 'Confirmation'
            this.currentBody = 'StatusModal'

        },
        showUser(){
            this.showModal = true
            this.modalHeader = 'Confirmation'
            this.currentBody = 'UserModal'
        }
    }
})

Just for example here i have two modals 'StatusModal' and 'UserModal' and i load them in my js file, so if i have 13 or more modals i will load 13 components in my js file, i need a solution that load only component that i need when i call function, It's possible to load component in function call?

I tried to use ajax and load blade content in ajax call and load it in my modal but i face a problem, i'm using vue validation for inputs so validation don't work (vee-validate) also any vue variable does not compiled and i get {{ variable }} in my modal.

What is the best solution for my case? i appreciate any help

  • 写回答

1条回答 默认 最新

      报告相同问题?

      相关推荐 更多相似问题

      悬赏问题

      • ¥15 如何关闭soui dummy wdn 进程
      • ¥20 含有jar文件的文件夹用tar -zcvf 命令压缩后要怎么还原回去?
      • ¥15 天宝TBC软件出现报错怎么解决
      • ¥15 micropython 从1开始切片报错
      • ¥15 请问该怎么做才能将文字说明和二维码一起作为png图片一起下载
      • ¥15 r语言 混频数据回归 midas_r
      • ¥15 人脸识recogizer.predict返回值id报错,KeyError,详情如下
      • ¥15 geowebcache部署失败
      • ¥20 关于adaboost+haar特征实现人脸检测过程的一些细节问题
      • ¥15 csv文件增加一列 为csv文件的名字