Problem with ruoyi+vue echoing numbers and solution

  Developed using ruoyi framework and front-end vue in the project,

The requirement is to generate a drop-down box on the front end. The content in the drop-down box needs to call the back-end interface for data return.

Now when adding new data, the data has been returned, but when modifying it again, echoing the data causes the numbers displayed in the front-end list to be not what we want. What we want is to be echoed into text.

When adding

 

When echoing

 

Solution, the code is as follows:

Code to echo a number

<el-col :span="12">
 <el-form-item label="方向" prop="directionId">
  <el-select class="filter-item" v-model="form.directionId" placeholder="Please select course direction">
    <el-option v-for="attr in  directions" :key="attr.directionId" :label="attr.directionName"
                   :value="attr.directionId"  > </el-option>
  </el-select>
</el-form-item>
</el-col>

Code to echo Chinese characters

<el-col :span="12">
 <el-form-item label="方向" prop="directionId">
  <el-select class="filter-item" v-model="form.directionId" placeholder="Please select course direction">
    <el-option v-for="attr in  directions" :key="Number(attr.directionId)" :label="attr.directionName"
                   :value="Number(attr.directionId)"  > </el-option>
  </el-select>
</el-form-item>
</el-col>