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!