Vuetify：如何从文本字段获取前缀的值

Question

我的页面中有一个包含各种文本字段的表单，在其中一个字段上我放置了一个前缀，因为我希望输入的值始终以相同的 5 个字母开头。

我能够从文本字段获取我的值到我的保存方法，但不能获取前缀，并且我无法在保存时手动添加它，因为该值将取决于用户选择的类型，我将尝试解释这一点：

• 如果用户选择类型 A，则不会有前缀，并且用户输入的值将被保存。
• 如果用户选择类型 B，文本字段中将会有一个前缀，并且该值将以前缀+用户输入的值的形式保存。

这是我现在的代码： 我的两个文本字段都取决于用户选择的类型：

  <v-col v-show="type === 'TypeA'">
    <v-text-field
      v-model="id"
      clearable
      required
      light
      solo
      dense
      max-length="36"
      :rules="idRule"
    >
    </v-text-field>
  </v-col>
  <v-col v-show="type === 'TypeB'">
    <v-text-field
      v-model="id"
      clearable
      required
      light
      solo
      dense
      max-length="31"
      prefix="ABCDE"
      :rules="idRule"
    ></v-text-field
  ></v-col>

这就是我在保存方法中所做的：

await this.$axios.$post(uri, {
  id: this.id,
});

我可能可以稍后根据选择的类型添加它，但我希望用户看到前缀，那么有没有办法可以直接从文本字段获取前缀？

Answer 1

如果前缀是变量，则在保存时只需将前缀值添加到

id

值即可。您也不需要两个不同的 v-text-field 组件来处理不同的前缀，因为前缀可以基于

type

动态更新。 计算属性可能是最简单的。

<v-text-field
  v-model="id"
  :prefix="prefix"
></v-text-field>

computed: {
  prefix() {
    return this.type === 'TypeB' ? 'ABCDE' : ''
  },
},

...

save() {
  await this.$axios.$post(uri, {
    id: this.prefix + this.id,
  });
}

演示