I'm trying to trigger an event on button click but this code which I expect to work isn't working.
I thought it was because I had no value in the data section initially so added data to allow the component to be reactive. That didn't do anything so I have no idea what to try next.
Code
<template>
<div>
<button @click="liveChatTrigger">{{ text }}</button>
</div>
</template>
<script>
export default {
name: "LiveChatButton",
method: {
liveChatTrigger() {
alert('trigger')
}
},
data() {
return {
text: 'Start a live chat now'
}
}
}
</script>
Error
[Vue warn]: Property or method "liveChatTrigger" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
[Vue warn]: Invalid handler for event "click": got undefined
(found in <Root>)
CodePudding user response:
You have defined the function in the method
property. It should be methods
.
CodePudding user response:
it methods, change de name property