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

最新推荐文章于 2024-12-07 00:10:25 发布

原创最新推荐文章于 2024-12-07 00:10:25 发布 · 4.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

vue 专栏收录该内容

27 篇文章

订阅专栏

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

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”，将其修改成数组，测试默认选中成功。猜想是正确的。这个转换很隐蔽，如果不是之前偶然看到过相关方面的介绍，还真猜测不到原因。