这是我的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 warn]: v-on:click="showAlert" 需要一个函数值，但未定义（在组件中找到：）
我可以看到“你好世界！” 在我的屏幕和按钮上，但当我点击它时没有任何反应。
我想我会有“测试”警报消息。
我做错什么了吗？
您的方法需要在您的methods部分中。
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
},
methods: {
showAlert: () => {
alert('test')
}
}
}
</script>