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 ui el-table 多选 表头全选框替换文字
element ui el-table 多选 表头全选框替换文字
1444 0
|
2月前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
115 0
|
11月前
|
JavaScript
Element UI - el-select(选择器)下拉多选菜单不换行显示
Element UI - el-select(选择器)下拉多选菜单不换行显示
|
移动开发 HTML5
Element-ui中 选择器(select)多选下拉框实现全选功能
Element-ui中 选择器(select)多选下拉框实现全选功能
728 0
Element-ui中 选择器(select)多选下拉框实现全选功能
|
前端开发
Element-ui中 实现多选表格(Table)增加 ‘全选’ 字样
Element-ui中 实现多选表格(Table)增加 ‘全选’ 字样
843 0
Element-ui中 实现多选表格(Table)增加 ‘全选’ 字样
|
JavaScript 开发工具 git
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
966 0
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
element-ui中Select 选择器去除点击时的淡蓝色边框
element-ui中Select 选择器去除点击时的淡蓝色边框
|
数据库
【TP5】select下拉框的默认显示父级
【TP5】select下拉框的默认显示父级
246 0
【TP5】select下拉框的默认显示父级
【Layui】对于列表页复选框只有选中时才会显示
【Layui】对于列表页复选框只有选中时才会显示
147 0
【Layui】对于列表页复选框只有选中时才会显示