CODEWITHSUNDEEP
javascriptfunctionmethodsvue.js
l2aelba
l2aelba

Reputation: 22147

Call function inside function by v-on:click

How can I able to call function inside function ?

Template : (HTML)

<a v-on:click="hello.world"></a>

JS : (as component)

methods: {
    hello: function() {
        return {
            world: function() {
                alert('hello world');
            }
        };
    }
}

This I got warning :

[Vue warn]: Invalid handler for event "click": got undefined

This is possible to call this.hello().world() by JS but not in template (html) like v-on

What i am missing ?

Upvotes: 2

Views: 2471

Answers (3)

magnudae
magnudae

Reputation: 1272

Just define world as a function either inside methods, globally or in the vue component and call it in a regular fashion.

<a @click="hello">foo</a>

function world() {
  alert("hello world");
}

<vue component> {
  methods: {
    hello: function() {
        world();
    }
  }
}

or this

<vue component> {
  methods: {
    hello: function() {
        this.world();
    },
    world: function() {
        alert("Hello world");
    }
  }
}

Upvotes: 0

Belmin Bedak
Belmin Bedak

Reputation: 9201

It should be used in a bit different way to make it working

<a v-on:click="hello().world()">foo</a>

http://jsbin.com/lizerazire/edit?html,js,output

Upvotes: 1

er-han
er-han

Reputation: 1921

I don't think this is a vue issue.

this.hello().world() is not valid because world() is not accessible now. Try adding double brackets () at the and of hello function:

methods: {
  hello: function() {
    return {
        world: function() {
            alert('hello world');
        }
    }();
  }
}

And you can now access the inner function like this: this.hello.world();

Upvotes: 1

Related Questions