使用 vuejs 翻译选择中的文本

Question

我想用 vuejs 翻译 select 选项中的文本，我该怎么做？

data: () => {
        
          hiring_types: [
           { value:'contract', text: 'contract'},
            {value:'vat', text: 'vat'}
          ],
    }

模板：

          <b-form-select
              v-model="form.contract_data.hiring_type"
              :options="hiring_types"
              @input="setSelected"
              id="hiring_types"
              :state="validate(form.contract_data.hiring_type)">
           </b-form-select>
  

Answer 1

只需使用计算。

假设'contract' 和'vat' 是现有的翻译键：

computed: {
  translatedOptions() {
    return this.hiring_types.map(i => ({ ...i, text: this.$t(i.text)}))
  }
}