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配置（模块），我会寻求以下解决方案。关键点是使用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
  }
})

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

Vue js用ajax加载模态内容

1 个答案:

聊天后编辑

以前的回答