Vue js 使用 ajax 加载模态内容

Question

我在 laravel 中使用 vue js，在我的页面中我有 13 个模态，我认为在同一页面中插入 13 个模态不是一个好主意，所以我把它放在我的刀片中：

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

在我的 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'));

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'
        }
    }
})

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

我尝试使用 ajax 并在 ajax 调用中加载刀片内容并将其加载到我的模式中，但我遇到了一个问题，我正在对输入使用 vue 验证，因此验证不起作用（vee-validate）以及任何 vue 变量没有编译，我在我的模式中得到 {{ variable }}。

什么是我的案例的最佳解决方案？感谢您的帮助

Answer 1

聊天后编辑

找到解决方案：

HTML：

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

JS：

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

---

上一个答案

如果使用 vue-cli webpack config(modules)，我会寻求如下解决方案。关键是使用System.import。它与 require 相同，但异步。即使您多次调用同一个文件，它也只会解析一次。它会在客户端缓存它。

我在这里使用render function，因为管理vue要容易得多模板替换。

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

注意我没有测试过。如果有任何问题或我误解了您的情况，请告诉我。