Vue+Element-UI在使用select标签时动态展示数据,设置默认值后无法选择其他项的问题

使用vue+elementui遇到的坑,记录以免以后再次遇到。

代码如下:

<el-col :span="12">
            <el-form-item
              label="业务复核人"
              prop="businessReviewer"
            >
              <el-select  filterable v-model="listForm.businessReviewer" label-width="350px" placeholder="请选择" @change="businessReviewerChange" >
                <el-option
                  v-for="item in businessReviewerList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

问题描述:

这是一个动态展示下拉选,数据均从后台获取,使用vue的v-for循环遍历,但是在给定默认值的时候,选择不了其他的项目,数据其实已经改变,但是页面展示的时候一直是固定的初始值。

原因:网上看大多数原因是Vue中render方法问题,这里提供一下官网render的地址,需要的自行查阅:

Vue官网中render渲染函数

解决:

businessReviewerChange(val){
          this.listForm.businessReviewer=val;
          this.$emit('update:listForm.businessReviewer',val);
          console.log("val======",val);
          this.$forceUpdate();
      },

在@change事件中添加 this.$forceUpdate()方法强制更新。

发布了14 篇原创文章 · 获赞 6 · 访问量 3050

猜你喜欢

转载自blog.csdn.net/tangyin_007/article/details/103859787