Call Vue method on button click

Viewed 5626

I am new to Vue and I've been toying around with a basic component and trying to get some interactivity to work. However, when attempting to implement some methods, I find that nothing actually happens. My code looks like this:

var testComponent = Vue.component('testComponent', {
    data: function () {},
    props: [ 'maps' ],
    methods: {
        filt: function() {
            alert("Useful alert");
        }
    },
    template: "<div><button class='btn-primary' @click='filt'>Filter</button></div>"
});

var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    computed: {},
    components: {
        TestComponent: testComponent
    },
    ready: function () {}
});

And my HTML essentially contains only this:

<test-component></test-component>

I would like to call the testComponent's filt method (which will later hopefully become a working filter method for the maps prop), but the button gives no alert on pressing it.

I've tried a few variations like v-on:click, but to no avail. Any help would be greatly appreciated!

0 Answers
Related