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

【问题标题】：Accessing vuetify v-text-field value for another text field访问另一个文本字段的 vuetify v-text-field 值
【发布时间】：2021-09-03 07:08:40
【问题描述】：

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

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>

【问题讨论】：

您是指占位符文本中的“建议”还是默认值？
对不起，我的意思是默认值。

标签： javascript vue.js vuetify.js

【解决方案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>

【讨论】：

这会在 VScode 中从 vetur 扩展触发“预期变量声明”。
我在这里犯了一个错误const =[first,last]=val.split(' ');你应该删除第一个=
只需要从 firstName lastName 到 username 的一种方式，所以我删除了 set(val) 块，对我有用。