修改vue组件方法

Question

In my project i have installed vue-picture-input but i need to modify a method in PictureInput.vue:

preloadImage (source, options) {

  ... code ...

  let headers = new Headers()
  headers.append('Accept', 'image/*')
  fetch(source, {
    method: 'GET',
    mode: 'cors',
    headers: headers
  })

  ...code..

}

I need to add an header in the request How can I extend/override it?

in my main.js I open vue as:

new Vue({
 router,
 store,
 vuetify,
 render: h => h(App)
}).$mount('#app')

Answer 1

You cannot override methods in other build components. You can make a fork of this component, change its method and then build it. Or if this component is a simple project, you can copy its.vue file in you project and use it as a local component.

Answer 2

I found it!

I have to extend the component, in my main i seted:

import PictureInput from "vue-picture-input";

Vue.component('PictureInput', PictureInput);
const newPictureInput = Vue.component('PictureInput').extend({
  methods: {
    preloadImage (source, options) {

      ...code...

      let headers = new Headers()
      headers.append('Accept', 'image/*')
      headers.append(newHeader)
      fetch(source, {
        method: 'GET',
        mode: 'cors',
        headers: headers
      })

     ...code...

    }
  }
});

Vue.component('newPictureInput', newPictureInput);

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

And it worked!