回显后v-model el-select 无法切换，数据不响应的解决办法

最新推荐文章于 2024-09-11 11:28:25 发布

qq_43817049

最新推荐文章于 2024-09-11 11:28:25 发布

阅读量206

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_43817049/article/details/141364018

版权

点击编辑，打开弹窗，把数据传给form组件，但是el-select切换数据不生效，点不动。

经过多次排除发现赋值有问题

<el-select v-model="formData.substreet" placeholder="请选择" @change="handleChangeSelect">
   <el-option 
        v-for="item in streetList" 
        :key="item.value" 
        :label="item.label" 
        :value="item.value">
    </el-option>
</el-select>
// ...

watch: {    
    rowData: {
      handler(val) {
        if (!val) return
        this.formData = Object.assign(this.formData, val)
        }
      },
      deep: true,
      immediate: true
    },

问题在于 this.formData = Object.assign(this.formData, val) 这行代码。

导致响应式失灵。换成this.formData = val 即可。