@ciick找不到东西，无法绑定方法

img

img

img

img

新人学vue，为什么@click无法找到方法啊，onclick能找到但是启动就显示，求指点指点

  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/884102
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：点击提交按钮不执行onclick方法
  • 除此之外, 这篇博客: 在vue项目中，onclick事件如何调用vue的函数中的 写在前面 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 在 Vue 的项目中，通过拼接 html，插入到页面中的内容。html 中的 onclick 方法，如何触发 Vue 中的方法呢？

    示例如下：

    let info = []
info.push(`<span class='top-total'>10人</span><div class='list-wrapper'>`)
nearPersonArr.forEach(data => {
  info.push(
    `<span class='infowindow-span' οnclick='openPerson(${data.id})'>${data.name}</span><br/>`
  )
})
info.push('</div>')
document.body.appendChild(info)

    我们把这个 info 插入到页面 dom 中。那么，这个 span 里面的 onclick 事件如何执行我们在 methods 中定义的方法呢？

    methods: {
  openPerson(id) {
    console.log(id)
  }
}
  • 以下回答由chatgpt基于相关博客总结生成:

    根据提供的参考资料和问题内容，可以看出点击事件的绑定方法是正确的，但可能出现了以下几个问题：

    1. 方法写法错误：检查一下方法是否正确命名并且在Vue实例的methods选项中正确定义了该方法。

    2. 方法调用时是否加上括号：点击事件在绑定方法时不需要加上括号，因为Vue会自动调用绑定的方法，而不需要手动调用。

    3. 事件委托：确保你的按钮是在Vue实例的根元素（el选项指定的元素）内部，否则点击事件可能无法触发。

    4. 生命周期问题：如果在Vue实例的mounted或created钩子函数中添加按钮的点击事件绑定，确保Vue实例已经成功挂载到DOM中。检查浏览器的控制台是否有其他报错信息。

    以下是一个可能的解决方案：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的事件处理</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <button @click="handleClick">Button</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick() {
                    console.log("Button clicked");
                }
            }
        })
    </script>
</body>
</html>

    在这个示例中，点击按钮时会在控制台中打印"Button clicked"。确保方法名正确，Vue实例正确挂载，并且不需要加上括号来调用方法。

改下 如有帮助给个采纳谢谢

img