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!

Answer 1

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>