How to extend a vuejs with a method?

Question

I'm currently trying to wrap my head around how to extend a vuejs instance. Specifically I want to separate an instance, so that I can reuse the base of an instance (the element and the data). I currently have different (laravel/blade) views for adding and editing items (domains), and I want to share a vuejs instance between these two, but I don't want to have the same code (the base) in two places.

Basically, what I'm searching for is the following:

<script type="text/javascript">
    var vue = new Vue({

    el: '#domain',

    data: {
        form: {
            'name'        : '',
            'git_repo'    : '',
            'auto_deploy' : '',
            'create_db'   : ''
        },
        ajaxResponse : ''
    }

    });
</script>

<script type="text/javascript">
    Vue.extend('domain_methods', {

        methods: {

            postDomain: function () {
                this.$http.post('{{ route('domain.store') }}', function (data, status, request) {
                    this.$set('ajaxResponse', data);
                }, {
                    data: this.form
                } ).error(function (data, status, request) {
                    this.$set('ajaxResponse', data);
                });
            }

        }

    });
</script>

But that obviously doesn't work. I just want to use the postDomain() method within the #domain element, without the method being written in the initial creation of the instance.

Thanks in advance!

If you want to reuse components, it's better to use mixins. http://vuejs.org/guide/extending.html — swift
– swift, Commented Jul 31, 2015 at 17:07

David K. Hess · Accepted Answer · 2015-07-30 00:34:23Z

7

Be careful – you are conflating the usage of .extend() with that of .component(). They do very different things. This section of the docs has more information on the differences:

http://vuejs.org/guide/components.html

In this particular case, just declare your top level Vue class via .extend() and then instantiate a subclass of it by using it as a constructor. This gives you inheritance-like behavior.

So, for instance:

<script type="text/javascript">
    var MainVue = Vue.extend({
        data: function () {
            return {
                form: {
                    'name'        : '',
                    'git_repo'    : '',
                    'auto_deploy' : '',
                    'create_db'   : ''
                },
                ajaxResponse : ''
            };
        }
    });
</script>

<script type="text/javascript">
    var secondary_vue = new MainVue({
        el: '#domain',
        methods: {
            postDomain: function () {
                this.$http.post('{{ route('domain.store') }}', function (data, status, request) {
                    this.$set('ajaxResponse', data);
                }, {
                    data: this.form
                } ).error(function (data, status, request) {
                    this.$set('ajaxResponse', data);
                });
            }
        }
    });
</script>

edited Jul 30, 2015 at 0:34

answered Jul 30, 2015 at 0:24

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

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

2 Comments

Sebastian Over a year ago

Thanks! I'm always struggling with inheritance stuff. The docs didn't make it clear for me right away, but combined with your answer it does makes sense.

Jimmy Obonyo Abor Over a year ago

this was very helpful indeed

Collectives™ on Stack Overflow

How to extend a vuejs with a method?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related