Имеем 2 компонента текстового инпута, делающих одно и тоже (подрезают введенное значение до длины 10 символов) разница только в отрисовке:
Vue.component('input-r',{
data: function() {
return {
v:''
}
},
created:function(){
this.v=this.checkValue(this.value);
},
methods:{
checkValue:function(value){
return (value.length > 10) ? value.substr(0,10) : value;
}
},
props:{
value:{
required:false,
default:''
}
},
watch:{
value:function(){
this.v=this.checkValue(this.value);
},
v:function(){
this.$emit('input',this.v);
}
},
render:function(createElement){
let self=this;
return createElement(
'input',{
attrs:{
type:'text'
},
domProps:{
value:self.v
},
on:{
input:function(e){self.v = self.checkValue(e.target.value)}
}
}
);
}
});
и
Vue.component('input-t',{
data: function() {
return {
v:''
}
},
created:function(){
this.v=this.checkValue(this.value);
},
methods:{
checkValue:function(value){
return (value.length > 10) ? value.substr(0,10) : value;
}
},
props:{
value:{
required:false,
default:''
}
},
watch:{
value:function(){
this.v=this.checkValue(this.value);
},
v:function(){
this.v=this.checkValue(this.v);
this.$emit('input',this.v);
}
},
template:`
<input type="text" v-model="v">
`
});
DEV-Tools-ы говорят, что в обоих компонентах 'обрезка' срабатывает при каждом событии input.
Однако input-t перерисовывается при каждом событии input и в поле ввода больше 10 знаков не отображается, а input-r перерисовывается подрезанным до 10 символов только после потери фокуса
Вот и вопросы: почему так? и как заставить input-r работать также, как input-t?
