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-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
4283 0
|
数据可视化 Python
堆叠柱状图(pyecharts足矣 既好看又简单
堆叠柱状图(pyecharts足矣 既好看又简单
1365 0
|
JavaScript 前端开发
vue3瀑布流布局(使用 Vue 3 框架的单文件组件格式(Single-File Component)编写的)
vue3瀑布流布局(使用 Vue 3 框架的单文件组件格式(Single-File Component)编写的)
877 0
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
7943 0
Element el-select 选择器(下拉框)详解
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
13963 120
ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示
ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示
555 0
|
JavaScript
vue中query和params传参的区别
vue中query和params传参的区别
616 0
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式