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>
    
相关文章
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
659 0
|
前端开发
element ui el-table 多选 表头全选框替换文字
element ui el-table 多选 表头全选框替换文字
1642 0
|
1月前
element组件库笔记一:element 框架中table表格复选框选中后,切换下一页之前选中复选框和数据消失的问题
这篇文章介绍了在Element UI框架中,如何解决表格组件复选框在分页时选中状态丢失的问题。
39 0
|
2月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
4月前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
50 1
|
4月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
647 3
通过select下拉框里的value控制div显示与隐藏
通过select下拉框里的value控制div显示与隐藏
81 0
element中el-select下拉框位置错乱问题
element中el-select下拉框位置错乱问题
663 0
Element UI - el-select(选择器)下拉多选菜单不换行显示
Element UI - el-select(选择器)下拉多选菜单不换行显示
|
前端开发
Element-ui中 实现多选表格(Table)增加 ‘全选’ 字样
Element-ui中 实现多选表格(Table)增加 ‘全选’ 字样
1189 0
Element-ui中 实现多选表格(Table)增加 ‘全选’ 字样