I had no issues with my app until I added the JavaScript, now I'm getting constant errors in the console.
One of the errors I see is:
Property or method "show" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
And another error is:
TypeError: _vm.show is not a function at click App.vue?d98c:25 at HTMLButtonElement.invoker vue.esm.js?efeb:1906
Goal: When clicking on "loginBtn", an alert should say "click".
This is my code:
// app.vue script
export default {
name: 'app'
}
var show = new Vue({
el: '#loginBtn',
data: {
n: 0
},
methods: {
show: function(event) {
targetId = event.currentTarget.id;
alert('click')
}
}
})
<!-- the button -->
<template>
<div>
<button v-on:click="show($event)" id="loginBtn">Login</button>
</div>
</template>