iView的Select 选择器选择失效

Hello_my_new_world

已于 2022-02-11 10:37:41 修改

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： javascript 前端开发语言

于 2022-02-11 10:36:28 首次发布

本文链接：https://blog.youkuaiyun.com/start_XUEBA/article/details/122874909

Vue.js 专栏收录该内容

5 篇文章

订阅专栏

在Vue项目中遇到一个问题，当尝试将接口返回的数组list的第一个元素作为Select组件的默认值defaultValue时，Select的选择器切换选项出现失效或延迟响应。原因是defaultValue直接使用list[0]导致默认值与选项值引用了同一个对象。解决方法是创建一个新的对象副本，如defaultValue={...list[0]}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：给iView的Select赋的值通过接口获取，得到数组 list，选择器的默认值 defaultValue 为数组list的第一个选择项（defaultValue = list[0]），完成后选择器切换选项失效，或点击多次才生效。

<Select v-model="defaultValue">
        <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>

思路：defaultValue不赋值或直接赋值一个对象，无问题，所以应该是因为defaultValue不能直接用list中的值赋值，即不能使默认值与选项值的地址指向一致，为同一对象。

解决：defaultValue 赋值改为：defaultValue = { ...list[0] }; 赋新对象，指向不一致，无问题。