新手求问 .lazy 感觉有问题 大神帮看下
粉丝福利 : 关注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>