vue组件绑定内容更新失败，组件显示无匹配数据

最新推荐文章于 2025-09-05 17:17:27 发布

原创最新推荐文章于 2025-09-05 17:17:27 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决El-Select组件中数据绑定错误的方法，通过改变绑定方式避免使用对象键名，确保选项正确显示。同时提供了具体的代码示例。

页面：
cess=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbmd5dWVfUHJvZ3JhbW1lcg==,size_16,color_FFFFFF,t_70)

这里本应显示“最近一周”的，显示了数字，更新数据和绑定数据类型都是一致的。遍历时不要用对象的key绑定，用对象下标解决（把:key="key"换成:key=“idx”、:value=“idx”），或者用目标数据里值的一个字段(我这里只有一个name属性)。

代码：

 <el-select v-model="accountSetting.defaultDateId" size="small" filterable style="width: 130px">
   <el-option
     v-for="(item, key, idx) in constant.defaultDateObj"
     :key="key"
     :label="item.name"
     :value="key">
   </el-option>
 </el-select>
...
export const defaultDateObj = {[0]: {name: '今天'}, [1]: {name: '昨天到今天'},
  [2]: {name: '最近一周'}, [3]: {name: '最近半个月'}, [4]: {name: '最近一个月'}}