Question

这是我的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！”在我的屏幕和按钮上，但是当我点击它时没有任何反应。

我想我会收到“测试”警告信息。

我做错了吗？

Answer 1

您的方法必须位于your methods section。

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

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

Answer 2

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

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

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

Answer 5

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

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

5 个答案: