为什么当我单击 Vue.js 中的按钮时我的警报功能不起作用答案

【问题标题】：Why my alert function is not working when I click on button in Vue.js为什么当我单击 Vue.js 中的按钮时我的警报功能不起作用
【发布时间】：2017-01-12 02:38:17
【问题描述】：

这是我的 index.html

<body>
    <app></app>
</body>

这是我的 main.js

import Vue from 'vue'
import App from './App'

new Vue({
  el: 'body',
  components: { App }
})

这是我的 App.vue

<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello
  }
}
</script>

这是我的 Hello.vue

<template>
  <div class="hello">
    <h1>
        {{ msg }}
    </h1>
    <button v-on:click="showAlert">Click</button>
  </div>
</template>

<script>
export default {
  data () {
    return {

      msg: 'Hello World!'
    }
  },
  showAlert: () => {
    alert('test')
  }
}
</script>

这是来自 Chrome 控制台的错误消息：

[Vue 警告]：v-on:click="showAlert" 需要一个函数值，但未定义（在组件中找到：）

我可以看到“Hello world！”在我的屏幕和按钮上，但当我点击它时没有任何反应。

我想我会有“测试”警报消息。

我是不是做错了什么？

【问题讨论】：

在此处打印您的控制台错误消息

标签： javascript vue.js

【解决方案1】：

您的方法需要在your methods section 中。

<script>
export default {
  data () {
    return {

      msg: 'Hello World!'
    }
  },
  methods: {
    showAlert: () => {
      alert('test')
    }
  }
}
</script>

【讨论】：

感谢您的帮助！它有效。如果我将警报更改为“this.msg = this.msg.reverse()”并显示“无法读取未定义的属性 'msg'”，为什么我无法访问 msg？
不应该是alert(this.msg.reverse())吗？
其实，JS 的reverse 似乎是针对数组，而不是字符串。
我想要的是当我点击按钮时永远不要在屏幕上打招呼
@aBloomer 你是什么意思？ hello world 出现在屏幕中，因为模板中有 <h1>{{ msg }}</h1>。

【解决方案2】：

methods: {
    showAlert: () => {
    alert('test')
  }
}

【讨论】：

【解决方案3】：

我发现这是一种有用的方法，可以向所有表达式添加警报，而无需向每个 Vue 组件添加方法。将服务路径调整为您想要的任何内容。

创建一个名为 /src/services/utility.js 的文件并放入其中：

export default {
  methods: {
    //alert wrapper for template debugging
    alert(msg) {
      if (msg === undefined) msg = 'Undefined';
      if (msg === '') msg = 'Empty String';
      alert(msg);
    }
  }
}

现在在您的 main.js 文件中导入该文件并将其设置为全局 mixin

import utility from '@/services/utility'
Vue.mixin(utility);

还有一个简单的按钮来测试它

<button @click="alert('Meow!')">Make cat speak</button>

【讨论】：

【解决方案4】：

<template>
  <div class="hello">
    <h1>
        {{ msg }}
    </h1>
    <button v-on:click="showAlert">Click</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  },
 methods: {
    showAlert: () => {
    alert('test')
  }
 }
}
</script>

【讨论】：

【解决方案5】：

而不仅仅是alert('Hello')，你需要做一个window.alert('Hello')

【讨论】：