Render values to corresponding text

The value transferred from the edit page is value, Details page display value Corresponding text
demand ： When selecting gender in the edit pop-up box There are three options male , Woman , A secret
Marital status can be married , unmarried , Whether to be on duty or not is optional , no , When it is transferred to the background, it corresponds to the transfer value, When the details are displayed, it shows value Corresponding Chinese characters . Because of the use of elementui-ui, I wrote all the information in one el-row in , Directly traverse an array of objects . Then it involves the echo of the value , This is what I do ：1 Define an array of objects , Every object in the array has key,value attribute ,key Is the field displayed on the page ,value Is the field name of the entity class used , If the field is gender , yes 1,2 Such figures are used to judge men and women , It is in this object that an identity is being defined , Such as other, Set to ture, You need to write the male and female corresponding to the returned value , Such as the gender returned in the background ,1 For men ,2 For women , That's the definition ： { name: ‘ Gender ’, value: ‘gender’, other: true, ‘1’: ‘ male ’, ‘2’: ‘ Woman ’, ‘3’: ‘ A secret ’ };2： Define an object , To receive the information returned from the background ;3： Traverse . Record the specific implementation
Effect display ：
Detail display Edit the pop-up :

Concrete realization ：

userInfo: [
        { name: ' Gender ', value: 'gender', other: true, '1': ' male ', '2': ' Woman ', '3': ' A secret ' },,
        { name: ' Marital status ', value: 'maritalStatus', other: true, '1': ' married ', '2': ' unmarried ' },
        { name: ' On duty or not ', value: 'isAttendance', other: true, '1': ' yes ', '2': ' no ' },
      ],
      //  Entities returned in the background , It's an object , Here, the attributes of the object should be the same as userInfo Of each object in value One-to-one correspondence 
       inf: {
        gender: '',
        maritalStatus: '',
        isAttendance: '',
      },
      //  Request background interface 
       getBasicInfoByUserId(this.inf.userId).then(response => {
        if (response.code === 200) {
        //  assignment 
          this.inf = response.data
        }
      })
//  Data rendering 
 <div style="font-size: 14px;color: #27314a; line-height: 32px;">
            <el-row :gutter="10">
              <el-col v-for="(item,index) in userInfo" :key="index" :span="12">
              //  Here we use signs to judge 
             	 {
   { item.name }}:{
   { item.other?item[inf[item.value]]:inf[item.value] }}
              </el-col>
            </el-row>
  </div>
  //  Or define a formatter Method 
   <div style="font-size: 14px;color: #27314a; line-height: 32px;">
            <el-row :gutter="10">
              <el-col v-for="(item,index) in userInfo" :key="index" :span="12">
                 {
   { item.name }}：{
   {formatters(item) }}
               </el-col>
            </el-row>
    </div>
   

mthoods in

    methods: {
   //  Format display data 
    formatters(item) {
      console.log(item)
      if (item.other !== undefined && item.other != null) {
        return item[this.inf[item.value]]
      } else {
        return this.inf[item.value]
      }
    }