douxiandiyo58855
2017-03-25 00:52
浏览 72

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

图片转代码服务由CSDN问答提供 功能建议

我正在使用带有laravel的vue js,在我的页面中我有13个模态,我觉得这不是一个好主意 在同一页面插入13个模态,所以我把它放在我的刀片中:

 &lt; modal v-if =“showModal”@ close =“showModal = false”&gt;  
&lt; header slot =“header”v-html =“modalHeader”&gt;&lt; / header&gt; 
&lt; component slot =“body”:is =“currentBody”&gt;&lt; / component&gt; 
&lt;  / modal&gt; 
   
 
 

在我的file.js中我有这个:

  Vue.component('modal  ',require('./ components / Modal.vue')); 
Vue.component('StatusModal',require('./ components / modals / StatusModal.vue')); 
Vue.component('UserModal',  require('./ components / modals / UserModal.vue')); 
 
 nstst profile = new Vue({
 el:'#profileof',
 data:{
 showModal:false,
 modalHeader:  '',
 currentBody:'',
},
方法:{
 showStatus(){
 this.showModal = true 
 this.modalHeader ='Confirmation'
  this.currentBody ='StatusModal'
 
},
 showUser(){
 this.showModal = true 
 this.modalHeader ='Confirmation'
 this.currentBody ='UserModal'
} 
}  
})
   
 
 

例如,我有两个模态'StatusModal'和'UserModal',我将它们加载到我的js文件中,所以如果我有13个 或者更多模态我将在我的js文件中加载13个组件,我需要一个只加载我调用函数时需要的组件的解决方案,可以在函数调用中加载组件吗?

I 试图在ajax调用中使用ajax并加载刀片内容并将其加载到我的模态中但我面临一个问题,我正在使用vue验证输入,因此验证不起作用(vee-validate)任何vue变量都没有编译和 我在我的模态中得到{{variable}}。

对我的案例来说,最佳解决方案是什么? 我感谢任何帮助

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • drpzr64329 2017-06-21 11:56
    已采纳

    Edit after chat

    Solution found:

    HTML:

    <component slot="body" :is="currentBody"></component>
    

    JS:

    showStatus() { 
      this.dialog = true 
      System.import('./components/modals/StatusModal.vue').then((response) => { 
        this.currentBody = response
      }); 
    },
    

    Previous answer

    If using vue-cli webpack config(modules), I'd go for a solution as follow. The key point is using System.import. It's the same thing as require but asynchronous. It will only resolve one time even if you call the same file multiple times. It'll cache it client side.

    I use a render function here, because it's a lot easier to manage vue template replacement.

    import Modal from './components/Modal.vue'
    
    const profile = new Vue({
      render(h) {
        if (this.showModal) {
          return h('modal', {
            on: {
              close() {
                this.showModal = false
              }
            }
          }, [
            h('header', { slot: 'header' }, this.modalHeader),
            h(this.currentBody, { slot: 'body' })
          ]);
        } else {
          return null;
        }
      },
      data: {
        showModal: false,
        modalHeader: '',
        currentBody: {},
      },
      methods: {
        showStatus() {
          this.showModal = true
          this.modalHeader = 'Confirmation'
          this.currentBody = System.import('./components/modals/StatusModal.vue')
        },
        showUser() {
          this.showModal = true
          this.modalHeader = 'Confirmation'
          this.currentBody = System.import('./components/modals/UserModal.vue')
        }
      },
      components: {
        Modal
      }
    })
    

    Note I haven't tested it. Let me know if anything goes wrong or if I misunderstood your case.

    点赞 打赏 评论

相关推荐 更多相似问题