如何在 ant-design 选择的 v-decorator 中使用条件 if else 语句

Question

I have a Vue app with select option that using ant-design selection

this is my html structure :

<a-select
  v-decorator="[
    'race',
    {
      initialValue: profile.race,
      rules: [
       {
         required: true, message: 'Race is required.'
       },
      ]
     },
    ]"
  >
     <a-select-option value=1>Malay</a-select-option>
     <a-select-option value=2>Chinese</a-select-option>
     <a-select-option value=3>Indian</a-select-option>
     <a-select-option value=4>Others</a-select-option>
   </a-select>

where the profile.race bring integer value. for showing the race. but in the default view, it's showing just integer instead of the words.

I want in default display it's showing the race word, not the integer value. I also have using defaultValue , but it's just the same with initialValue how can I play with the conditional statement in v-decorator ? or anything I can do to solve this problem?

this is the code that i have tried but still did not work.

initialValue: '\''+profile.race+'\'', 

this will bring '1' as value but still it showing '1' instead of the race. but when i'm using

initialValue: '1' , it's work. how can it be?

Answer 1

The initialValue need to be a string value in order to work as expected

initialValue: profile.race + ''

This is the working example: https://codesandbox.io/s/vue-template-sokxn