Element_select 选择器 选中框中显示不了选中的值

简介: 解决Vue中`el-select`选择器不显示选中值的问题:在`selectChanged`方法中添加`this.$forceUpdate()`,强制组件更新,使输入框显示选择的值。示例代码包括模板和方法。
  • 问题:select 选择器再选择时,必须点击其他位置,才能显示选择框中的值
  • 解决:显示框中不显示选中的值, 需要进行forceUpdate强制进行刷新,使用this.$forceUpdate();进行强制刷新,输入框中的值就会展示
  • 源码如下:

      <template>
        <el-select v-model="value" placeholder="请选择"  @change="selectChanged">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
    
      <script>
        export default {
         
          data() {
         
            return {
         
              options: [{
         
                value: '选项1',
                label: '黄金糕'
              }, {
         
                value: '选项2',
                label: '双皮奶'
              }, {
         
                value: '选项3',
                label: '蚵仔煎'
              }, {
         
                value: '选项4',
                label: '龙须面'
              }, {
         
                value: '选项5',
                label: '北京烤鸭'
              }],
              value: ''
            }
          },
           methods: {
         
              // 改变的值
              selectChanged(e) {
         
                  // 强制刷新
                  this.$forceUpdate(); 
              },
        }
      </script>
    
相关文章
|
JavaScript 数据安全/隐私保护
vue3+element-plus权限控制实现(el-tree父子级不关联情况处理)
后台管理系统常见的权限控制需求,这里讲button实现交互细节处理, 取消选中子级menu/button,父级不关联取消; 选中/取消父级catalog/menu,子级全部选中/取消; 选中/取消部分子级menu/button,父级关联半选中状态(indeterminate=true);
1112 2
|
XML JSON JavaScript
【前端】Vue项目中 JSON 编辑器的使用
【前端】Vue项目中 JSON 编辑器的使用
6729 0
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
8108 0
Element el-select 选择器(下拉框)详解
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10937 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
14287 120
【1】ElementUI 组件实际应用===》按钮的使用
这篇文章详细介绍了Element UI库中的按钮组件的使用方法,包括基础用法、禁用状态、文字按钮、图标按钮、按钮组、加载中状态、不同尺寸的按钮以及按钮的属性说明。文章通过实例代码展示了如何定义按钮样式、添加图标、设置按钮尺寸和类型,并解释了如何绑定方法到按钮以执行操作。
|
JavaScript
Vue组件点击事件不触发的问题,添加事件修饰符native解决
Vue组件点击事件不触发的问题,添加事件修饰符native解决
1622 0
element下拉框回显问题
element下拉框回显问题
1172 0
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
4314 1