elementui选择器显示出错

问题描述

在我的vue前端中使用了elementui的选择器，<el-select>，写法参照官网

<!--  data是你想要通过选择器选择后获取到的值绑定-->
<el-select v-model="data" placeholder="请选择">
<!-- 这里通过一个for循环来初始选择的可选项，label是用于页面展示，而value才是我们需要的值-->
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

这里从后端查询到的data值，通过了选择器，却没有正常显示label值，而是显示了对应的value值

问题分析

分析选择器原理，data是与选项中的某一个value一致的，然后value是由用户点击了对应label的选项获取到的。

• 那么，正常使用选择时：用户点击了选项中展示的label，在选择器中就得到了对应的value并且交给了v-modul绑定的变量。最后提交给后端。所以后端获取到的本质是一个选项的value。
• 在通过后端查询进行数据回显时：后端将value（数据库中保存的）返回给前端，然后前端的选择器获取到该值并查找是否存在对应的选项。查找到了就会显示对应的label，没有找到应该就是显示该值本身。

然而，却发现后端返回的值是1，选项中绑定的也有一个value是‘1’。没有正常回显？

解决方法

问题就出在数据类型上，不仔细看是发现不了的，从后端获取到的是int类型，而前端的选项中是string类型。所以在前端获取数据时，需要手动转换一下数据类型。这里因为我前端是string，后端返回是int，所以我在前端获取的函数中修改

//将int拼接空字符将其转换成string
getData(){
    this.axios(url,id).then(response=>{
        this.data=response.data.value+''
    })
}

可正常回显