element plus el-radio-group 无法默认选中原因排查

supming1

于 2022-10-26 17:02:45 发布

阅读量4.6k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/supming1/article/details/127535882

vue 专栏收录该内容

27 篇文章

订阅专栏

博客讲述了Element Plus中el-radio-group设置v-model却无法选中对应项的问题。经排查，发现是obj的key虽写成number形式，内部会自动转成string，将其改成数组后，默认选中测试成功，此转换较为隐蔽。

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

element plus el-radio-group 设置了v-model，但没有选择对应的项。代码如下

<el-radio-group v-model="type">
    <el-radio :label="key" v-for="(value, key) in oType" :key="key">{{ value }}</el-radio>
</el-radio-group>

<script lang="ts" setup>
    import { ref } from 'vue'

    const type = ref(1)
    const oType = {0:'目录' 1:'菜单'}
</script>

这代码看起来貌似都是正确的，所以排查许久，后面猜测是由于“obj的key虽然写成了number的形式，但其内部其实会自动转成string”，将其修改成数组，测试默认选中成功。猜想是正确的。这个转换很隐蔽，如果不是之前偶然看到过相关方面的介绍，还真猜测不到原因。