本文介绍了如何在VUE中同时使用v-model和v-model.trim的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我的代码：
<input type="text" id="first_name" class="form-control" v-model="user.attributes.first_name"
@keyup.enter="updateProfile" v-model.trim="$v.first_name.$model"
:class="{'is-invalid':$v.first_name.$error, 'is-valid':!$v.first_name.$invalid}">
我在表单中使用vuelify来验证我的输入域。但同时，我将User对象作为道具，并希望将对象的名字显示为输入字段的值。由于我修剪了输入字段的值，我想我不能再使用v-model来显示我的值了。您对此有什么解决方案吗？
推荐答案
首先，同一元素上不能有多个v-model。
然后，如果要将道具用作v模型，则必须自己设置@input事件。
cfvuelidate documentation
<template>
<input v-model.trim="$v.first_name.$model" @input="updateFirstname">
</template>
<script>
export default {
props: {
user: Object
},
validations: {
first_name: { ... }
},
methods: {
updateFirstName(newFirstName) {
this.user.attributes.first_name = newFirstName
this.$v.first_name.$touch()
}
}
}
</script>
这篇关于如何在VUE中同时使用v-model和v-model.trim的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！