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

最新推荐文章于 2024-02-21 09:04:54 发布

elkoala

最新推荐文章于 2024-02-21 09:04:54 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： js vue

本文链接：https://blog.csdn.net/Mingyue_Programmer/article/details/118000976

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

页面：
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: '最近一个月'}}