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>
    
相关文章
|
XML JSON JavaScript
【前端】Vue项目中 JSON 编辑器的使用
【前端】Vue项目中 JSON 编辑器的使用
5659 0
|
JavaScript 前端开发
vue3瀑布流布局(使用 Vue 3 框架的单文件组件格式(Single-File Component)编写的)
vue3瀑布流布局(使用 Vue 3 框架的单文件组件格式(Single-File Component)编写的)
803 0
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
7677 0
Element el-select 选择器(下拉框)详解
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10496 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
12175 120
|
JavaScript
vue中query和params传参的区别
vue中query和params传参的区别
549 0
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
4303 0
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
JavaScript
成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)
这篇文章分享了解决Vue中`el-dialog`弹出窗口在第一次打开时数据未加载问题的技巧,通过改变组件的`key`属性来强制Vue重新渲染DOM,从而确保数据正确加载。
成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)

热门文章

最新文章