Menu
I'm trying to learn VueJS. I've made my first vue and I'm testing the directives. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Partie 1 Chapitre 3 - Vue Mart</title>
</head>
<body>
<div id="app">
<button v-on:click="alert('hello')">Cliquez ici !</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
costOfApples: 5,
costOfBananas: 2,
costOfCoconuts: 8,
favoriteColor: 'rose'
},
//Propriétés calculées
computed: {
totalAmount() {
return this.costOfApples + this.costOfBananas + this.costOfCoconuts
},
label() {
return ': '+ this.favoriteColor
}
}
})
</script>
</body>
</html>
When I click my button I get this error:
TypeError: alert is not a function
[Vue warn]: Error in v-on handler: "TypeError: alert is not a function"
[Vue warn]: Property or method "alert" 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>)
I really don't know where to start looking. To me, my code seems okay. Thanks for your help
320
you should define alert in your methods
methods(){
alert(){
// do something
}
}
answered Dec 07 '25 18:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With