Skip to content

Failed to mount component: template or render function not defined #73

@izshreyansh

Description

@izshreyansh

Similar issue #16 exists, But the conversation lead into Laravel mix specific solution.
I'm using Vue Project with Vue 2.6.11

I'm still receiving this error in console Failed to mount component: template or render function not defined.

Can someone please help me, My Vue file looks like this:

<script>
  import VueClip from 'vue-clip';

  export default {

    components: { VueClip },

    data() {
      return {
        options: {
          url: process.env.VUE_APP_API_URL + '/imports/create',
          paramName: 'member',
          method:'POST',
          uploadMultiple: false,
          maxFiles:1,
          acceptedFiles: ['text/*','application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
        },
      }
    },

    methods: {
      onUploaded(file, status, xhr) {
        console.log({status: status, xhr:xhr});
      },
    }
  }
</script>

<template>
  <div>
    <vue-clip :options="options" :on-complete="onUploaded" class="custom-file">
      <template slot="clip-uploader-action">
        <div>
          <div class="dz-message"><h2> Click or Drag and Drop files here upload </h2></div>
        </div>
      </template>
      <template slot="clip-uploader-body" scope="props">
        <div v-for="file in props.files" :key="file.name">
          <img v-bind:src="file.dataUrl" />
          {{ file.name }} {{ file.status }}
        </div>
      </template>
    </vue-clip>
  </div>
</template>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions