从0到1解决项目问题经验-Vue3前端

问题1：

我有文件里面这么一段代码，但是现在有个问题，就是在设备信息详情的抽屉页面中，当我首次点击查看的时候，显示的物流中心名称现在是跟"deviceInfo.logisticsCenterName"做的绑定，于是现在显示出来是oliver这个名称，但是当我选择下述代码中的下拉选项的时候，比如我选中了其中的某一项的option.id为20，然后代码会将deviceInfo.logisticsCenterName赋值为20，但这个时候当我调用保存编辑的修改方法的时候，我希望是将deviceInfo.stationId的值改成20然后作为入参的一部分来传参。这个该怎么实现呢
 

<el-select v-model="deviceInfo.logisticsCenterName" filterable remote :remote-method="remoteMethod" :loading="loading" :disabled="!isEditMode"> <el-option v-for="option in logisticsCenterNameOptions" :key="option.id" :label="option.logisticscentername" :value="option.id" ></el-option> </el-select>

解决方案：

1、添加 @change 事件监听器：在 el-select 组件上添加 @change="handleLogisticsCenterChange"，当用户选择下拉选项时，会触发 handleLogisticsCenterChange 方法。

2、实现 handleLogisticsCenterChange 方法：该方法接收一个参数 value，即用户选中的选项的值（也就是 option.id），将其赋值给 deviceInfo.stationId。

2、修改 handleSave 方法：在保存编辑的修改方法中，将 deviceInfo 作为入参发送请求，此时 deviceInfo.stationId 已经包含了用户选择的物流中心的 id。

综上：用@change来处理这种数据和显示区别问题