Unable to overwrite method in Vue constructor

Question

I have a component with one method, which I'm firing on creation. It's using vue-select but purpose of this component shouldn't be relevant to my issue.

<template>
    <v-select :on-change="onchangecallback"></v-select>
</template>

<script>
    import Vue from 'vue'
    import vSelect from 'vue-select'

    Vue.component('v-select', vSelect);

    export default {
        methods: {
            onchangecallback: () => {alert('default')}
        },
        created: function() {
            this.onchangecallback();
        }
    }
</script>

In other file I'm importing this component and creating a new instance of it with Vue constructor and passing new onchangecallback method, which, by my understanding, should overwrite the default onchangecallback method:

import VSelect from './components/ui/VSelect.vue';

new Vue({
    VSelect,
    el:         '#app',
    components: {VSelect},
    template:   `<v-select />`,
    methods:    {
        onchangecallback: () => {alert('custom')} // doesn't work
    }
});

But when I start the app, instead of alert('custom') I still get alert('default').

Well first, never use arrow functions to define your methods. Second, did you mean extends: VSelect? — Bert
– Bert, Commented Nov 3, 2017 at 16:48
@Bert adding extends: VSelect to constructor made alert('custom') appear but alert('default') is displayed as well, I thought it will ovewrite it. Why I shouldn't use arrow functions for defining methods? Is it because they change this context? — van_folmert
– van_folmert, Commented Nov 3, 2017 at 17:08
Yes. If you use an arrow function, you will never have the correct this inside the method. Also, I can't replicate what you are telling me about both alerts displaying. codepen.io/Kradek/pen/RjaPWE?editors=1010 — Bert
– Bert, Commented Nov 3, 2017 at 17:12
I'm quite sure what you are trying to accomplish here. I was able to replicate your issue, but if you are extending the VSelect component, I do not see the need to add the components section or the template because VSelect is the component extended, and it already defines a template. codesandbox.io/s/4j2k0lvo67 — Bert
– Bert, Commented Nov 3, 2017 at 17:34
@Bert It's for storybook, the idea is to overwrite component's "default" template/props/methods by each custom component scenario. But codesandbox is not replicating my issue with alert, it displays only one, for me it's two alerts. — van_folmert
– van_folmert, Commented Nov 6, 2017 at 10:02

Lucas Katayama · Accepted Answer · 2017-11-03 21:22:00Z

1

I don't know what you are trying to achieve.

But here is my solution https://codesandbox.io/s/84qw9z13v9

You need to define a prop to pass your new callback function to that component (through the prop)

 props: {
    onchangecallback: {
      type: Function,
      default() {
        return function() {
          alert('default');
        };
      },
    },
  },
  created: function() {
      this.onchangecallback();
  }

And the use it instead the default one.

Check all the code in that snippet.

answered Nov 3, 2017 at 21:22

Lucas Katayama

4,61030 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

van_folmert Over a year ago

but shouldn't we pass functions in methods property?

Benjamin Schmidt · Accepted Answer · 2017-11-03 22:51:09Z

0

For communication between components you're supposed to use events. Emit an event in a child component and make the parent component listen to it:

In the child component:

created() {
    this.$emit('change')
}

In the parent component:

Template:

<child-component v-on:change="doSomething" />

Methods:

methods: {
    doSomething() {
        // ...
    }
}

Explanation

In the child component you emit an event, in this case "change", whenever something changed. In your case this was upon creation of the component.

In the parent component you tell Vue that, whenever the child component emits a "change" event, it should run the method "doSomething" in your parent component.

This is used in many places, i.e. inputs, where the input emits an event "input" whenever its content changes and any parent can listen for that by using v-on:input="methodHere".

answered Nov 3, 2017 at 22:51

Benjamin Schmidt

1,06113 silver badges30 bronze badges

1 Comment

van_folmert Over a year ago

Ok, but how is that relevant to my issue?

Collectives™ on Stack Overflow

Unable to overwrite method in Vue constructor

2 Answers 2

1 Comment

Explanation

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Explanation

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related