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

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日

悬赏问题

  • ¥20 Hbase启动失败,无法启动HMaster
  • ¥15 sqpingboot在父模块已经引入了mybatisplus 在子组件不写版本号还是报错
  • ¥20 Lumerical FDTD solutions 中模型的相对阻抗,有效介电常数和有效磁导率的实部和虚部的数据如何获得?
  • ¥100 sql reporting service 远程smtp服务器配置支持
  • ¥15 ppyoloe_r带角度目标检测,loss_cls没法收敛
  • ¥15 淘宝交易指数如何解读,其关联的数据指标是什么
  • ¥15 Linux下安装搜狗拼音不能显示中文
  • ¥15 事件7000导致的自动重启如何解决
  • ¥15 (标签-matlab|关键词-m3)
  • ¥20 做一个web书店,带答辩