Quasar：根据选项组切换邮箱输入框后缀

看起来你已经搭好了基础的机构单选切换布局，咱们只需要补充几个小步骤就能实现邮箱后缀自动更新的功能啦：

步骤1：完善组件数据定义 #

首先在Vue组件的data里添加需要的变量，用来存储邮箱前缀、选中的后缀，以及绑定单选框的机构值：

<script>
export default {
  data() {
    return {
      institution: '', // 绑定单选框的机构值
      emailPrefix: '', // 用户输入的邮箱前缀
      selectedSuffix: '' // 当前选中的邮箱后缀
    }
  },
  // 后续方法写在这里
}
</script>

步骤2：实现切换机构的方法 #

修改你的changeInstitution方法，当用户切换单选框时，从选中的选项里拿到对应的后缀，同时可以处理一下现有邮箱的后缀替换（如果需要的话）：

<script>
export default {
  // ... 上面的data
  methods: {
    changeInstitution() {
      // 找到当前选中的机构选项
      const selectedOption = this.$refs.institutionOptions.options.find(opt => opt.value === this.institution)
      if (selectedOption) {
        this.selectedSuffix = selectedOption.suffix
        
        // 可选：如果之前已经输入过邮箱，自动替换旧后缀
        if (this.emailPrefix.includes('@')) {
          this.emailPrefix = this.emailPrefix.split('@')[0]
        }
      }
    }
  }
}
</script>

另外记得给q-option-group加上ref，方便我们获取选项列表：

<q-option-group 
  ref="institutionOptions"
  type="radio" 
  v-model="institution" 
  @change="changeInstitution" 
  :options="[ 
    {label: 'Institution 1', value: 'I1', suffix: '@institution1.fr'}, 
    {label: 'Institution 2', value: 'I2', suffix: '@institution2.fr'} 
  ]" 
/>

步骤3：处理邮箱输入框的显示与绑定 #

接下来完善邮箱输入框，我们可以用计算属性来拼接完整的邮箱地址，或者让用户只输入前缀，自动拼接后缀：

<q-field icon="email" label="Adresse courriel" :label-width="3">
  <!-- 方式1：用户输入前缀，自动显示完整邮箱 -->
  <q-input 
    v-model="emailPrefix" 
    :placeholder="`Votre prénom.nom${selectedSuffix}`"
  >
    <!-- 在输入框末尾添加只读的后缀 -->
    <template #append>
      <span class="text-grey-500">{{ selectedSuffix }}</span>
    </template>
  </q-input>

  <!-- 方式2：直接绑定完整邮箱，切换时自动替换后缀 -->
  <!-- <q-input 
    v-model="fullEmail" 
    placeholder="Votre adresse courriel"
  /> -->
</q-field>

如果用方式2，需要添加计算属性fullEmail：

<script>
export default {
  // ... data和methods
  computed: {
    fullEmail: {
      get() {
        return this.emailPrefix + this.selectedSuffix
      },
      set(val) {
        // 当用户手动输入完整邮箱时，拆分前缀和后缀
        const splitVal = val.split('@')
        this.emailPrefix = splitVal[0]
        // 如果输入的后缀在选项里，自动匹配对应的机构
        const matchedOption = this.$refs.institutionOptions.options.find(opt => opt.suffix === `@${splitVal[1]}`)
        if (matchedOption) {
          this.institution = matchedOption.value
          this.selectedSuffix = matchedOption.suffix
        }
      }
    }
  }
}
</script>

完整示例代码 #

把所有部分整合起来，就是这样：

<template>
  <div class="q-pa-md">
    <q-field icon="work" label="Institution" :label-width="3" >
      <q-option-group 
        ref="institutionOptions"
        type="radio" 
        v-model="institution" 
        @change="changeInstitution" 
        :options="[ 
          {label: 'Institution 1', value: 'I1', suffix: '@institution1.fr'}, 
          {label: 'Institution 2', value: 'I2', suffix: '@institution2.fr'} 
        ]" 
      />
    </q-field>

    <q-field icon="email" label="Adresse courriel" :label-width="3" class="q-mt-md">
      <q-input 
        v-model="emailPrefix" 
        :placeholder="`Votre prénom.nom${selectedSuffix || ''}`"
      >
        <template #append>
          <span class="text-grey-500" v-if="selectedSuffix">{{ selectedSuffix }}</span>
        </template>
      </q-input>
    </q-field>

    <!-- 可选：显示完整邮箱地址 -->
    <div class="q-mt-md">
      <span>完整邮箱：</span>
      <strong>{{ emailPrefix + selectedSuffix }}</strong>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      institution: '',
      emailPrefix: '',
      selectedSuffix: ''
    }
  },
  methods: {
    changeInstitution() {
      const selectedOption = this.$refs.institutionOptions.options.find(opt => opt.value === this.institution)
      if (selectedOption) {
        this.selectedSuffix = selectedOption.suffix
        // 自动清理旧后缀（可选）
        if (this.emailPrefix.includes('@')) {
          this.emailPrefix = this.emailPrefix.split('@')[0]
        }
      }
    }
  }
}
</script>

这样一来，当用户切换不同的机构单选框时，邮箱输入框的后缀就会自动更新啦，还能保持用户输入的前缀不变～

内容的提问来源于stack exchange，提问作者djcaesar9114