el-element中el-select选中值,数据已经改变但选择框中不显示值,需要其他输入框输入值才显示这个选择框才会显示刚才选中的值


el-element中el-select选中值,数据已经改变但选择框中不显示值,需要其他输入框输入值才显示这个选择框才会显示刚才选中的值

原因:可能是由于数据层次过多,render 函数没有自动更新,需要手动强制刷新。
解决方法:在selectChanged方法中添加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: ''
        }
      }methods: {
          // 改变的值
          selectChanged(e) {
              // 强制刷新
              this.$forceUpdate(); 
          }
    }
  </script>

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 00:18:05       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 00:18:05       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 00:18:05       45 阅读
  4. Python语言-面向对象

    2024-07-20 00:18:05       55 阅读

热门阅读

  1. QtService实现后台服务linux,windows

    2024-07-20 00:18:05       16 阅读
  2. wpf 启动文件的设置

    2024-07-20 00:18:05       15 阅读
  3. WPF中MVVM常用的框架

    2024-07-20 00:18:05       16 阅读
  4. 代码随想录算法训练营第三十四天

    2024-07-20 00:18:05       17 阅读
  5. ES6 数值的扩展(十八)

    2024-07-20 00:18:05       12 阅读
  6. 从零开始学习嵌入式----数据结构之链表

    2024-07-20 00:18:05       19 阅读
  7. Nestjs后台服务

    2024-07-20 00:18:05       15 阅读