Everything in my app was working perfectly fine until I began to add my javascript. Now I continuously get errors in the console.
I get this error:
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.
As well as this error:
TypeError: _vm.show is not a function at click App.vue?d98c:25 at HTMLButtonElement.invoker vue.esm.js?efeb:1906
Desired Outcome: Click on "loginBtn" alert prompts "click".
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>