CODEWITHSUNDEEP
vuejs2mixins
LorenzoBerti
LorenzoBerti

Reputation: 6974

Function in Mixins Vuejs not found

Hello I have a component:

<template>
 <upload-btn 
   color="black" 
   title="Carica foto" 
   :fileChangedCallback="fileChange" />
</template>
<script>
import  fileUploadMixin from './../mixins/fileUploadMixin';
export default {
  name: 'compoment',
  mixins: [fileUploadMixin],
  components:{
    'upload-btn': UploadButton
  },
  data(){..},
  methods: {
    fileChange(file){
      this.fileChanged(file);
    }
   }
</script>

And then my Mixin:

export default {
  data () {

  },
  methods: {
    fileChanged(file){
      if(file){
        this.itemImage = file;
        this.previewImage = URL.createObjectURL(file);
      }
    }
  }
}

The problem is it return this error like the mixins not is included, but actually is imported.

vue.runtime.esm.js?2b0e:1878 TypeError: this.fileChanged is not a function

I have tried also change my mixin with:

methods: {
    fileChanged: function(file){}
}

but it doesn't work.

What i'm wrong?

Upvotes: 5

Views: 6222

Answers (3)

LorenzoBerti
LorenzoBerti

Reputation: 6974

For others developers.

I'have solved.

The problem was that my Mixins file extension was wrong.

I have put Mixin.vue instead of Mixin.js, thank you all for answers.

Upvotes: 8

BradM
BradM

Reputation: 656

The Mixin should be computed:

export default {
    data () {},
    computed: {
         fileChanged(file){
              if(file){
                   this.itemImage = file;
                   this.previewImage  = URL.createObjectURL(file);
              }
          }
      }
 }

Upvotes: 0

Steven Spungin
Steven Spungin

Reputation: 29109

Try removing the data block from your mixin, or returning an empty object from it.

Upvotes: 0

Related Questions