el-select 改变选项时动态修改页面值,遇到问题。

我再页面上定义一个el-select,想实现根据 el-select 选择不同的值改变页面中对应控件的值。
在页面上定义了存储值的对象 createForm. 在js中利用 changeLogisticsUser 函数根据el-select选项获取到logisticsUser对象,然后给createForm.logisticsUser 对象赋值。
我想实现的是改变logisticsUser对象后页面中对应的控件值也改变。
但是现在的效果是:改变el-select的选项值(选中 新浪)后页面控件值没有变化,然后再次改变el-select选中值为 百度,页面中控件值变成了 新浪 对应的值。
求解。。。

export default {
    name: 'containerOrder',
    data() {
      return {
            createForm: {
              idx:null,
              id:null,
              orderNo: null,
              logisticsUser: {
                companyTypeName: null,
                lockedQuota: null,
                quota: null,
                availableQuota: null,
              }
            },
          }
        }
      }
<el-row>
  <el-col :span="8">
    <el-form-item :label="this.$t('containerOrder.company')" prop="logisticsUserId">
      <el-select v-model="createForm.logisticsUserId" @change="changeLogisticsUser" filterable :placeholder='$t("pub.inputKey")'>
        <el-option v-for="item in companyData" :key="item.id" :label="item.val" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-form-item :label="this.$t('logisticsUser.quota')" prop="logisticsUser.quota">
      <span>{{createForm.logisticsUser.quota}}</span>
    </el-form-item>
  </el-col>
<el-row>
changeLogisticsUser(val){
  logisticsUserApi.queryOne(val).then(res=>{
    let data=res.data.data
    this.createForm.companyName=data.companyName
    this.createForm.logisticsUserId=data.uid
    this.createForm.logisticsUser.companyTypeName=data.companyTypeName
    this.createForm.logisticsUser.quota=data.quota
    this.createForm.logisticsUser.availableQuota=data.availableQuota
    this.createForm.logisticsUser.lockedQuota=data.lockedQuota
  })
},
讨论数量: 1

已找到解决方法:
赋值时先定义一个局部变量 logisticsUser ,然后将最新值赋给这个局部变量,再将这个局部变量赋值给this.createForm.logisticsUser 即可,如下:
···
changeLogisticsUser(val){
logisticsUserApi.queryOne(val).then(res=>{
let data=res.data.data
this.createForm.companyName=data.companyName
this.createForm.logisticsUserId=data.uid
var logisticsUser={}
logisticsUser.companyTypeName=data.companyTypeName
logisticsUser.quota=data.quota
logisticsUser.availableQuota=data.availableQuota
logisticsUser.lockedQuota=data.lockedQuota
this.createForm.logisticsUser=logisticsUser
})
},

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!