如何在VUE中同时使用v-model和v-model.trim [英] How to use v-model and v-model.trim at the same time in vue

问题描述

以下是我的代码：

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！