el-select选择框选择无反应，值已经更新，但是页面没有显示变化（2024-04-16）

最新推荐文章于 2025-10-09 10:09:08 发布

原创最新推荐文章于 2025-10-09 10:09:08 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章讲述了在Vue组件中，当用户点击休假选项但页面未选中时，通过调用`$forceUpdate()`方法实现页面视图的强制更新，确保选中的状态正确显示。

点了选择框【休假】，但是页面并没有选中，是因为页面响应数据没有更新

解决方案，使用强更新机制强行更新页面视图

重点 @change="$forceUpdate()" 强制更行页面

<el-select clearable v-model="restDayId" @change="$forceUpdate()" placeholder="请选择">
  <el-option
    v-for="dict in resetDayList"
    :key="dict.value"
    :label="dict.label"
    :value="dict.value"
    @click.native="getTypeName(dict)"
  ></el-option>
</el-select>


export default {
  name: "Role",
  data() {
    return {
      resetDayList:[{value:'1',label:'值班'},{value: '2',label:'休假'}]
    }
  },
  methods:{
    changeDate(item){
      let that = this;
    },
    getTypeName(val){
    
    },
 }
}

改完之后就可以选择了