VueJS on-click event not working

Question

I couldn't manage to make it work. v-on:click event is not invoking the method on Vue instance. Here is the codes:

<div id="app">
    <button class="btn btn-success" v-on:click="postEventData">
        <i class="icon wb-share"></i> Publish
    </button>
</div>

Vue instance:

var vm = new Vue({
    el: '#app',
    data: {
        someData: 'fooBar'
    },
    methods: {
        postEventData: function () {
            axios.post('/foobar', vm._data);
        }
    }
});

Any help would be appreciated!

Your v-on:click is getting called just fine. Look at this fiddle for example fiddle.jshell.net/v1qpt8d8/1 — Andrew L
– Andrew L, Commented Sep 25, 2017 at 15:10
You need to reference this in your postEventData method, not vm — thanksd
– thanksd, Commented Sep 25, 2017 at 15:11
Thanks but even I copy paste the jsfiddle, it is not working. — lostbyte
– lostbyte, Commented Sep 25, 2017 at 15:33

user3743266 · Accepted Answer · 2017-09-25 15:14:51Z

1

Change this axios.post('/foobar', vm._data);

to this: axios.post('/foobar', this.data);

answered Sep 25, 2017 at 15:14

user3743266

1,1724 gold badges16 silver badges28 bronze badges

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

1 Comment

lostbyte Over a year ago

I tried regular onclick="vm.postEventData()" and it is working fine. However, when I changed vm._data to this.data it is not working too. I couldn't understand why.

thanksd · Accepted Answer · 2017-09-25 17:26:52Z

1

I'm not seeing anything broken with your code.

That said, it would be better practice to use this to reference the Vue instance instead of vm. But, you would still need to reference the _data property of your Vue instance to get the data object (this.data is going to be undefined).

However, while you can reference your data object via this._data, it's a code smell. Your Vue instance's data properties are meant to be accessed individually directly off of this. Accessing the whole object breaks that paradigm.

If you are trying to submit { someData: 'fooBar' } in your post request, make a data property for that (say postData) and reference it via this.postData:

 var vm = new Vue({
    el: '#app',
    data: {
        postData: { someData: 'fooBar' }
    },
    methods: {
        postEventData: function () {
            axios.post('/foobar', this.postData);
        }
    }
});

Your template with v-on:click="postEventData" is fine.

answered Sep 25, 2017 at 17:26

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

1 Comment

lostbyte Over a year ago

Thanks for detailed information! I will try your suggestions on my code and share the output in the comments later.

tito.300 · Accepted Answer · 2020-06-26 20:15:44Z

0

Old question but this is what worked for me if someone else is stuck

button click event was actually trying to submit form since it was contained in a form element. So in order to make it call the method I had to do @click.prevent="myMethod()"

.prevent is the key. It acted as event.preventDefault()

answered Jun 26, 2020 at 20:15

tito.300

1,1861 gold badge12 silver badges23 bronze badges

Collectives™ on Stack Overflow

VueJS on-click event not working

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related