Vuejs - Dynamically adding component-CodePudding

I'm building a Vue chat application. When user A wants to send an image to user B. I will upload the image to the server then return the name and URL of the file. My question is how can I append a component (like vue-easy-lightbox) to make it possible for the user to zoom, pan, etc.

    onchangefileposupld() {
        this.isUploadImage = true;
        this.files = this.$refs.fileuploadmsg.files;
        let formData = new FormData();
        for (var i = 0; i < this.files.length; i  ) {
            let file = this.files[i];
            formData.append('files['   i   ']', file);
        }

        let promise = _msgSvc.OnPostUpload(formData);
        const self = this;
        promise
            .then((rs) => {
                self.isUploadImage = false;
                var data = rs.data;
                if (data.status) {
                    self.sendMsg(data.lstImgURL[0], 3); // Send image
                    self.message = "";
                }
            })
            .catch(() => { });
    }

If this is static data, I can add it by embedding the component directly as the vue-easy-lightbox documentation says

import Vue from 'vue'
import Lightbox from 'vue-easy-lightbox'

Vue.use(Lightbox)

<template>
  <vue-easy-lightbox
    :visible="visible"
    :imgs="imgs"
    @hide="handleHide"
  ></vue-easy-lightbox>
</template>

But this is not possible because the user will send any image so I also need to add the lightbox component automatically.

This is my chat application interface

CodePudding user response：

The Lightbox component should be inside the view that you will send and receive the images from, so that your imgs variable will be reactive and vue easy lightbox will be render each time is imgs changed so let's suppose that this is your chat box view

<template>
<div>
  <vue-easy-lightbox
    :visible="visible"
    :imgs="imgs"
    @hide="handleHide"
  ></vue-easy-lightbox>
  //here your sending component
</div>
</template>
<script>
import Lightbox from 'vue-easy-lightbox'
export {
   data: () => ({
      imgs: []
   }),
   components: {Lightbox },
   methods: {
     onchangefileposupld() {
        this.isUploadImage = true;
        this.files = this.$refs.fileuploadmsg.files;
        let formData = new FormData();
        for (var i = 0; i < this.files.length; i  ) {
            let file = this.files[i];
            formData.append('files['   i   ']', file);
        }

        let promise = _msgSvc.OnPostUpload(formData);
        const self = this;
        promise
            .then((rs) => {
                self.isUploadImage = false;
                var data = rs.data;
                if (data.status) {
                    self.sendMsg(data.lstImgURL[0], 3); // Send image
                    ///here push the imgs
                     self.imgs.push(data.lstImgURL[0])
                    self.message = "";
                }
            })
            .catch(() => { });
     }
   }
}
</script>