美文网首页js css html
el-select初始化赋值后无法选值的问题

el-select初始化赋值后无法选值的问题

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-01-02 14:18 被阅读0次

问题场景:ElementUI下拉框el-select赋值后无法选值的问题

问题在于el-option在v-for循环的时候,绑定的是对象数组,还是字符串数组
当for循环的是对象数组的时候是没有这个问题的,如

       options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }]
<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

当for循环的是字符串数组的时候就有问题了,如果初始化的时候,给绑定值赋值,你会发现,下拉选择之后,框内的数据无法更改

    options: [
        "number",
        "name",
        "type",
        "manageDeptName",
        "useDeptName",
        "endUsedName",
        "registerTime",
      ],
    <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
    </el-select>

经过这个样的赋值之后,在页面选择下拉数据的时候无法选中(其实已经更改,只是页面没有实时刷新)

所以,解决办法就是使用$forceUpdate(),在el-select值改变的时候执行刷新组件

<template>
  <el-select v-model="value" 
  placeholder="请选择" @change="$forceUpdate()"> //重点
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

相关文章

  • Map赋值的问题

    出错代码如下: 原因:Map赋值单个值后,固定为Map 类型了,无法赋值其他类型的Map值。 简化后的出错: 简化...

  • 记一次el-select默认回显问题

    在el-select远程搜索中会有个回显问题 就是明明传入了绑定值但是却会显示不出来 解决代码如下 在数据初始化的...

  • Dart中final和const

    1. const 值必须在编译时知道,初始化后无法更改 2. final 值必须在运行时知道,初始化后无法更改 3...

  • Swift 基本运算符之赋值

    一:赋值运算符 赋值运算 a = b, 表示用 b 的值来初始化或更新 a 的值。 如果赋值的右边是一个多元组, ...

  • swift笔记二(基本运算符)

    赋值运算符 赋值运算 a = b, 表示用 b 的值来初始化或更新 a 的值. 如果赋值的右边是一个多元组, 它的...

  • C++Primer-变量和基本类型

    初始化与赋值初始化的含义是创建变量的时候赋予其一个初始值,赋值的含义是把对象的当前值擦除,而以一个新值来替代。列表...

  • 智能指针

    std::unique_ptr<> 初始化:直接初始化、右值赋值、std::move作为函数返回值作为函数形参

  • 笔记摘要(三)-- Swift3.0浮点数求余

    赋值运算符a = b : 表示用b的值来初始化或更新a的值。与C、OC不同的是,Swift的赋值操作并不返回任何值...

  • el-table 自定义表头无法重新渲染

    1.无法展示自定义头部问题 el-table 自定义表头无法重新渲染,通过el-select选择修改数据后,数据更...

  • PS1 Q3关于二维数组赋值的问题

    在Q3初始化二维数组后重新赋值出现了以下的问题: 或者在按以下方式初始化数组: 当在对这个数组重新赋值时,会出现:...

网友评论

    本文标题:el-select初始化赋值后无法选值的问题

    本文链接:https://www.haomeiwen.com/subject/luokqdtx.html