gpt4 book ai didi

javascript - 为什么在 Vue.js 中单击按钮时我的警报功能不起作用

转载 作者:搜寻专家 更新时间:2023-10-30 23:00:36 25 4
gpt4 key购买 nike

这是我的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" expects a function value, got undefined (found in component: )

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

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

我做错了什么吗?

最佳答案

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

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

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

关于javascript - 为什么在 Vue.js 中单击按钮时我的警报功能不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39318488/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com