VueJS TypeError：警报不是函数答案

【问题标题】：VueJS TypeError: alert is not a functionVueJS TypeError：警报不是函数
【发布时间】：2020-08-14 08:24:10
【问题描述】：

我正在尝试学习 VueJS。我已经制作了我的第一个 vue，并且正在测试指令。这是我的代码：

<!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>

当我点击我的按钮时，我得到了这个错误：

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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

我真的不知道从哪里开始寻找。对我来说，我的代码似乎没问题。感谢您的帮助

【问题讨论】：

标签： vue.js alert vue-directives

【解决方案1】：

你应该在你的方法中定义警报

methods(){
   alert(){
       // do something      
   }
}

【讨论】：

好吧我明白了，我以为它会像警报方法一样执行。但是，如果我想重现警报方法的行为，我该怎么做呢？我正在关注一个使用警报之类的教程，他们没有在他们的方法中定义它，这就是我问的原因
编辑：我像 <button v-on:click="showColor">Cliquez ici !</button> 那样调用 showColor ，然后我定义了一个方法 showColor (){ alert('hello')} 并且它起作用了。虽然，我不知道为什么当我直接做<button v-on:click="alert('hello')">Cliquez ici !</button> 时它不起作用是因为指令吗？谢谢！
@click="()=>{alert('test')}" 这样你就可以直接使用js alert