访问另一个文本字段的 vuetify v-text-field 值

Question

我想根据用户的名字和姓氏提出用户名建议。这个想法是在用户完成 first name 和 last name 字段后，username 字段值将是第一个+ 姓氏。

firstName = Bobby
lastName = Brown
username = BobbyBrown

<v-text-field
    v-model="firstName"
    label="First Name"
></v-text-field>

<v-text-field
    v-model="lastName"
    label="Last Name"
></v-text-field>

<v-text-field
    v-model="username"
    label="Username"
></v-text-field>

<script>
export default ({
  data() {
    return {
        firstName: '',
        lastName: '',
        username: '',
    }
  },
})
</script>

Answer 1

username 应声明为使用 set/get 方法计算的属性：

<script>
export default ({
  data() {
    return {
        firstName: '',
        lastName: '',
       
    }
  },
computed:{
   username:{
      get(){ 
           return this.firstName+' '+this.lastName;
        },
      set(val){
          const [first,last]=val.split(' ');
          this.firstName=first;
          this.lastName=last;
        }

}
})
</script>

访问另一个文本字段的 vuetify v-text-field 值

Accessing vuetify v-text-field value for another text field

javascript

vue.js

vuetify.js