Eaco1412
2021-06-10 09:56
采纳率: 100%
浏览 58

为什么vue组件里无法绑定数据,也不能使用watch方法?

vue初尝试,想写一个普通的手机验证码登录页面,在App.vue中使用Login组件,在Login.vue中使用tel组件,问题出在tel.vue;一个普普通通的{{msg}}居然不起作用,想用watch监听输入框的变化也不成功,(同样的代码换到App.vue中可以成功)不知道为啥。

tel.vue代码如下:

<template>
    <div className="firststep">
        <input v-model="number" className="input" placeholder="请输入电话号码"  @keydown="change">
    </div>
    <div className="erro">{{msg}}</div>
    
</template>
<style>
.firststep{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
    height: 25px;
}
.input{
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: rgb(119, 119, 119);
    border-width: 1px;
    width: 100%;
}
.erro{
    display: relative;
    height: 100px;
    font-size: 10px;
}

</style>
<script>

export default {
    name:'tel',
    date(){
        return{
            msg:"nihaoya",
            number:'',
            error:true,
            errorinf:"请输入正确的手机号"
        }
    },
    methods:{
        change: function(){
            console.log(this.number)
            
        }
    },
    watch:{
      'number':{
              handler(newName){
                 console.log(newName);
              }
            },
          immediate:true
    }
}
</script>

渲染到页面上后,<div className="erro">{{msg}}</div>这一句渲染失败,显示如下

请问有朋友知道这是怎么回事吗?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • CSDN专家-微编程 2021-06-10 10:41
    已采纳

    将template里的代码,放到一个div标签里面,另外在script里面date应该写成data

    已采纳该答案
    1 打赏 评论
  • CSDN专家-微编程 2021-06-10 10:12

    你应该没有将tel.vue这个组件注册到index.js里面吧?

    1 打赏 评论
  • CSDN专家-微编程 2021-06-10 10:15

    vue文件都要在index.js里面进行注册

    1 打赏 评论
  • 彭大哥学编程 2021-06-10 10:00

    template模板内只能有一个父标签

    1 打赏 评论
  • zhshchilss 2021-06-10 10:01

    date--->data

    1 打赏 评论
  • Eaco1412 2021-06-10 10:56

    谢谢各位,已经解决了!

    打赏 评论
  • 有问必答小助手 2021-06-11 11:23

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    打赏 评论

相关推荐 更多相似问题