新手求问 .lazy 感觉有问题 大神帮看下
发布于 7 年前 作者 adu8419 2477 次浏览 最后一次编辑是 7 年前 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

我是刚学的菜鸟 写了个组件

在v-model 上 加了 .lazy 后 第一次输入 不进去 (不管输入什么 输入框 里都是没有值) 第二次以后正常

去掉后表现正常, 看api 说加了lazy 属性 可以让 v-model 的 变化 从 input 事件转变为 change事件(不知道理解正确不)?

这是为什么呢?

代码在下面

<!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>Document</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body>
<my-input :model="inputNameData"></my-input> <my-input :model="inputEmailData"></my-input>
    <button type="button" @click="addUser">Add User</button>
</div>

<script type="text/html" id="my-input-template">
    <div class="input-box">
        <input type="text" :placeholder="model.placeholder" v-model.tirm="value"  v-on:input="input" />
        <div class="error" v-show="isShowError" >{{model.errMsg}}</div>
    </div>
</script>

<script>

    Vue.component('my-input', {
        template: '#my-input-template',
        props: {
            model: Object
        },
        data: function () {
            return {
                isShowError: true,
                value: this.$props.model.value
            }
        },
        methods: {
            input: function(e) {
               var v = e.target.value;
               var  bool = this.model.partten.test(v);
              // Vue.set(this.$data,  'isShowError', !bool);

              this.$data.isShowError = !bool
            }
        }
    })

   new Vue({
       el: '#demo',

       data: {
         inputNameData: {
            errMsg: 'Name cannot be empty.',
            value: '',
            placeholder: 'UserName',
            partten: /\w+/
         },
         inputEmailData: {
            errMsg: 'Please provide a valid email address.',
            value: '',
            placeholder: 'email@email.com',
            partten: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
         }
       },

       methods: {

           addUser: function() {

           }
       }
   })
</script>
</body> </html>
回到顶部