如何获取Vuetify v-text-field值实现根据姓名自动填充用户名字段

你可以通过以下两种常用方式实现自动拼接用户名的需求：

方案1：使用watch监听器（最常用，支持手动修改用户名不被覆盖） #

该方案会在firstName或lastName变更时自动更新用户名，且如果你后续手动修改了username字段，不会被自动生成的内容覆盖，更符合推荐用户名的使用场景。
修改后的完整代码如下：

<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: '',
        // 标记是否已经手动修改过用户名，避免自动覆盖
        isUsernameModified: false
    }
  },
  watch: {
    // 监听firstName变化
    firstName(newVal) {
      if (!this.isUsernameModified) {
        this.username = newVal + this.lastName
      }
    },
    // 监听lastName变化
    lastName(newVal) {
      if (!this.isUsernameModified) {
        this.username = this.firstName + newVal
      }
    },
    // 监听用户名手动修改
    username() {
      this.isUsernameModified = true
    }
  },
})
</script>

如果不需要保留手动修改的内容，直接去掉isUsernameModified相关判断即可。

方案2：使用计算属性（适合用户名只读不可修改的场景） #

如果生成的用户名不允许用户手动修改，直接用计算属性更简洁：

<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
    :value="username"
    label="Username"
    readonly
></v-text-field>

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

如果你需要对用户名做格式化处理，比如统一转小写、加下划线分隔，直接修改拼接逻辑即可，示例：return ${this.firstName.toLowerCase()}_${this.lastName.toLowerCase()}``

内容的提问来源于stack exchange，提问作者M.Pribadi