动态插入后重新渲染Vue组件

Question

我在这个例子中使用dropzone，它接受一个文件，当文件上传时，我提供了一个预览模板。然后，预览模板需要从“导入小部件”中在此示例中呈现新的dropzone组件“import-widget”

newData = data(randperm(size(data, 1)), :)(1:K, :);

 var Dropzone = require('dropzone')
  Dropzone.autoDiscover = false
  Dropzone.autoProcessQueue = false

  export default {
    data(){
      return{
        collection: false,
      }
    },
    props: {
      id: {
        type: String,
        required: true
      },
      method: {
        type: String,
        required: false
      },
      url: {
        type: String,
        required: true
      },
      clickable: {
        type: Boolean,
        default: true
      },
      acceptedFileTypes: {
        type: String
      },
      thumbnailHeight: {
        type: Number,
        default: 200
      },
      thumbnailWidth: {
        type: Number,
        default: 200
      },
      showRemoveLink: {
        type: Boolean,
        default: true
      },
      maxFileSizeInMB: {
        type: Number,
        default: 2
      },
      maxNumberOfFiles: {
        type: Number,
        default: 5
      },
      autoProcessQueue: {
        type: Boolean,
        default: true
      },
      useFontAwesome: {
        type: Boolean,
        default: false
      },
      useCustomDropzoneOptions: {
        type: Boolean,
        default: false
      },
      dropzoneOptions: {
        type: Object
      }
    },
    events:{
      processQueue: function(data){
        this.processQueue();
      }
    },
    methods: {
      removeAllFiles: function () {
        this.dropzone.removeAllFiles(true)
      },
      processQueue: function () {
        console.log(this.dropzone.getQueuedFiles());
        this.dropzone.processQueue();
        console.log('Dropzone widget dispatching updateUploadCollection');
        this.$dispatch('updateUploadCollection',this.collection);
      }
    },
    computed: {
      cloudIcon: function () {
        if (this.useFontAwesome) {
          return '<i class="fa fa-cloud-upload"></i>'
        } else {
          return  '<i class="material-icons"></i>'
        }
      },
      doneIcon: function () {
        if (this.useFontAwesome) {
          return '<i class="fa fa-check"></i>'
        } else {
          return  ' <i class="material-icons"></i>'
        }
      },
      errorIcon: function () {
        if (this.useFontAwesome) {
          return '<i class="fa fa-close"></i>'
        } else {
          return  ' <i class="material-icons">error</i>'
        }
      }
    },
    ready () {
      console.log('Dropzone Widget Ready');
      var element = document.getElementById(this.id)
      if (!this.useCustomDropzoneOptions) {
        this.dropzone = new Dropzone(element, {
          clickable: this.clickable,
          thumbnailWidth: this.thumbnailWidth,
          thumbnailHeight: this.thumbnailHeight,
          maxFiles: this.maxNumberOfFiles,
          maxFilesize: this.maxFileSizeInMB,
          dictRemoveFile: 'Remove',
          addRemoveLinks: false,
          acceptedFiles: this.acceptedFileTypes,
          autoProcessQueue: this.autoProcessQueue,
          dictDefaultMessage: this.cloudIcon +'<br>Click Here To Add Files To Upload',
          previewTemplate: '<div class="row dz-preview dz-file-preview"><div class="col-xs-1" data-dz-remove>x</div><div style="word-wrap: break-word;" class="col-xs-2 dz-filename"><span data-dz-name></span></div><div class="col-xs-2 dz-image"><img width="100%" data-dz-thumbnail /></div><div class="col-xs-4"><import-widget id="import-widget2" method="post" url="test/url"></import-widget></div></div>',
          previewsContainer: '#previews',

        })
      } else {
        this.dropzone = new Dropzone(element, this.dropzoneOptions)
      }

      // Handle the dropzone events
      var vm = this
      this.dropzone.on('addedfile', function (file) {
        vm.$forceUpdate();
        vm.$emit('vdropzone-fileAdded', file)
      })

      this.dropzone.on('removedfile', function (file) {
        vm.$emit('vdropzone-removedFile', file)
      })

      this.dropzone.on('success', function (file, response) {
        console.log('dropzone success response');
        console.log(response);
        if (!vm.collection) {
          vm.$set('collection', []);
        }
        vm.collection.push(response);
        vm.$emit('vdropzone-success', file, response)
      });

      this.dropzone.on('error', function (file, error, xhr) {
        vm.$emit('vdropzone-error', file, error, xhr)
      })

      this.dropzone.on('sending', function(file, xhr, formData){
        console.log('appending: ' + Laravel.csrfToken);
        formData.append("_token", Laravel.csrfToken);
        vm.$emit('vdropzone-sending', file, xhr, formData)
      })
    },
  }

参见“previewTemplate”..在这里你可以看到我插入了组件。问题是系统将其视为html而不是vue组件。围绕这个最好的方法是什么？