只剩渣了 2019-02-17 18:06 采纳率: 100%
浏览 34142
已结题

Vue点击事件无效：Invalid handler for event "click": got undefined

描述：

定义了单击事件，但是使用Vue组件生成的标签就检测不到单击的方法，并报错：Invalid handler for event "click": got undefined

把标签放到外面可以正常使用，使用Vue组件生成后就报错，而且msg这个也找不到了

请问该如何处理？以下是全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="container">
        <div id="navbar_left">
            <pr></pr>
        </div>
    </div>

    <script>
    Vue.component("pr",{
                name:"pr",
                template:"<p @click='this.toggle'>{{msg}}</p>",
                data(){
                    return{
                        open:true
                    }
                }
            });
    var app = new Vue({
            el:"#navbar_left",

            data:{
                msg:"hello world",                
            },

        methods:{
                toggle(){
                    this.open = !this.open
                }
            },
        });
    </script>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • 天际的海浪 2019-02-17 19:34
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="container">
        <div id="navbar_left">
            <pr :msg="msg"></pr>
        </div>
    </div>

    <script>
    Vue.component("pr",{
            name:"pr",
            template:"<p @click='this.toggle'>{{msg}}</p>",
            props: ["msg"],
            data(){
                return{
                    open:true
                }
            },
            methods:{
                toggle(){
                    this.open = !this.open;
                }
            }
        });
    var app = new Vue({
            el:"#navbar_left",
            data:{
                msg:"hello world",
            }
        });
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 7月27日

悬赏问题

  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派，无法执行update，如何解决？（相关搜索：软件下载）
  • ¥15 Windows11, backspace, enter, space键失灵