31、element 解决el-select 下拉选择默认赋值后，无法再次选择数据的问题

前端@伦伦

已于 2022-11-16 10:38:59 修改

阅读量2.7k

点赞数 1

文章标签： vue.js 前端 javascript elementui

于 2022-11-16 10:12:22 首次发布

本文链接：https://blog.youkuaiyun.com/ljl960426/article/details/127879314

版权

这篇博客讨论了在Vue应用中遇到的一个问题：初始化数据后，下拉框默认选中第一个选项，导致无法再选择其他选项。作者通过深入监听`form.busName`属性并使用`this.$set()`方法来更新对象属性，成功解决了这个问题。解决方案包括在watch中处理数据变化，确保选中值的正确更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：初始化数据，下拉框默认选中第一个数据后，无法再次选择其他数据

getPowerSelectBus(netid) {
      getSelectBusNew({
        netid: netid
      }).then((res) => {
        this.optionProps = res.data.data
        this.form.busName = this.optionProps[0].label
      })
    },

解决方案：使用watch监听某个属性的数据变化后，再使用this.$set()给对象或者数组里面的某个属性重新赋值，成功解决问题。

'form.busName': {
      handler(val) {
        this.$set(this.form, 'busName', val)
        this.optionProps.map((item, index) => {
          if (val == item.value) {
            this.$set(this.form, 'busid', item.value)
          }
        })
      },
      deep: true //深层监听
    },