Is it possible to nest methods in Vue.js in order to group related methods?

Question

I'd like to group some of my Vue.js methods together in a sort of "submethod" class, but I only seem to be able to have single level methods.

For example, if I wanted to have a set of methods dealing purely with button actions:

new Vue({

    el: '#app',

    data: { },

    methods: {

        buttonHandlers: {

            handler1: function() {
                dosomething;
            },

            handler2: function() {
                dosomething;
            }

        }

    }

});

I would expect to be able to then use something like:

<button v-on:click="buttonHandlers.handler1">Click Me</button>

but nothing happens.

I have tried forcing the function to run by adding brackets:

<button v-on:click="buttonHandlers.handler1()">Click Me</button>

but I receive this console error:

Uncaught TypeError: scope.buttonHandlers.handler1 is not a function

I've setup a small https://jsfiddle.net/ozx9oc4c/ to demonstrate what I mean.

If anyone knows of a way to logically group functions under parent methods in Vue.js, rather than pages and pages of single level methods with no real structure, I'd be grateful for your knowledge.

Answer 1

The closest I've got to doing this, is to declare the parent as a function, and return an object with a set of methods.

Example:

new Vue({

  el: '#app',

  data: {},

  methods: {

    buttonHandlers: function() {
      var self = this; // so you can access the Vue instance below.

      return {

        handler1: function() {
          dosomething;
          self.doSomething();
        },

        handler2: function() {
          dosomething;
        },

      },

    }

  }

});

And you can call the methods like this:

<button @click="buttonHandlers().handler1()">Click Me</button>

Answer 2

There is actually a very simple technique: define your nested methods in the created hook:

created() {
  this.on = {
    test: () => {console.log(this)}
  }
  this.on.test();
}

NOTE: Two things, A) in this case you must use arrow function(s) and B) if this feels "hacky" to you, perhaps because of the cluttering of the created lifecycle hook, you can always delegate to a method, let's say this.namespaceMethods(), e.g.:

created() {
  this.namespaceMethods();
  // call namespaced methods
  this.foo.bar();
  this.foobar.baz();
  // etc.
},
methods: {
  this.namespaceMethods() {
    this.foo = {
      bar: () => {console.log("foobar")}
    },
    this.foobar = {
      baz: () => {console.log("foobarbaz")}
    }
  },
  // etc
}