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

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

<template> <div class=“background” style=“font-family:kaiti”> <div class=“login-container”> <div class=“login-box”> <div class=“blur-box”> <h2 style=“text-align: center; font-size: 26px; color: black;margin-bottom: 20px;margin-top: -10px;”>欢迎登录</h2> <el-form status-icon ref=“formRef” :rules=“data.rules” :model=“data.form” style=“margin-bottom: 20px;”> <div class=“input-group”> <el-form-item prop=“username”> <el-input v-model=“data.form.username” prefix-icon=“User” placeholder=“请输入账号” clearable /> </el-form-item> </div> <div class=“input-group” style=“margin-top: 10px;”> <el-form-item prop=“password”> <el-input v-model=“data.form.password” prefix-icon=“Lock” placeholder=“请输入密码” show-password clearable /> </el-form-item> </div> <div class=“role-select”> <div v-for=“role in roles” :key=“role.value” class=“role-item” :class=“{ active: data.form.role === role.value }” @click=“data.form.role = role.value” > <div class=“radio-dot”></div> {{ role.label }} </div> </div> <el-button @click=“login” type=“primary” class=“login-btn”>登 录</el-button> <div style=“text-align: right; margin-top: 15px;”> 还没有账号? <a class=“register-link” href=“/register”>立即注册</a> </div> </el-form> </div> </div> </div> </div> </template> <script setup> import { reactive, ref } from ‘vue’ import { User, Lock } from ‘@element-plus/icons-vue’ import { ElMessage } from ‘element-plus’ import request from ‘@/utils/request’ import axios from ‘axios’ const roles = [ { label: ‘管理员’, value: ‘ADMIN’ }, { label: ‘教师’, value: ‘TEACHER’ }, { label: ‘学生’, value: ‘STUDENT’ } ] const data = reactive({ form: { role: ‘ADMIN’, username: ‘’, password: ‘’ }, rules: { username: [{ required: true, message: ‘请输入账号’, trigger: ‘blur’ }], password: [{ required: true, message: ‘请输入密码’, trigger: ‘blur’ }] } }) const formRef = ref() const login = () => { formRef.value.validate(async (valid) => { if (!valid) return try { const res = await request.post('/login', data.form) if (res.code === '200') { localStorage.setItem('xm-pro-user', JSON.stringify({ ...res.data, token: res.data.token // 确保token字段存在 })) ElMessage.success('登录成功') // 添加路由跳转容错处理 setTimeout(() => { if (res.data.role === 'ADMIN') { window.location.href = '/' } else { window.location.href = '/front/home' } }, 500) } } catch (error) { ElMessage.error(res.msg) } }) } </script> <!-- 统一导航逻辑 --> <nav class=“main-nav” v-if=“showNavigation”> <template v-if=“!data.user”> <router-link to=“/front/home” class=“nav-item”>首页</router-link> <router-link to=“/courses” class=“nav-item”>视频课程</router-link> <router-link to=“/live” class=“nav-item”>直播课程</router-link> </template> <!-- 未登录状态显示登录/注册 --> <div class=“user-actions” v-else> <router-link to=“/login” class=“auth-link”>登录</router-link> <span class=“divider”>|</span> <router-link to=“/register” class=“auth-link”>注册</router-link> </div>为什么点击登录的时候页面一点反应都没有,也登录不成功,浏览器报错POST http://localhost:8080/login net::ERR_FAILEDUncaught (in promise) ReferenceError: res is not defined
03-27
### Vue 3 和 TypeScript 中 Element Plus 的 `el-radio-group` 组件取消选中Vue 3 结合 TypeScript 使用 Element Plus 开发时,如果希望实现 `el-radio-group` 组件可以被取消选中的功能,则可以通过设置默认值为空或特定标记来达成此目的。通常情况下,`el-radio-group` 不允许直接取消择已项,但是通过绑定 v-model 到一个可变变量并控制该变量的状态即可间接达到效果。 为了使 radio group 支持取消选中,在模板部分定义好相应的 Radio Group 并将其 value 属性双向绑定到父级作用域内的数据属性上: ```html <template> <div class="example"> <!-- 定义Radio按钮组 --> <el-radio-group v-model="selectedValue" @change="handleChange"> <el-radio :label="1">Option A</el-radio> <el-radio :label="2">Option B</el-radio> </el-radio-group> <!-- 添加清除按钮用于重置择状态 --> <button type="button" @click="clearSelection()">Clear Selection</button> </div> </template> ``` 接着是在脚本标签内声明组件逻辑以及初始化 selectedValue 数据项为 null 或者其他表示未定状态的特殊值;同时提供 clearSelection 方法用来清空当前的择: ```typescript <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: "Example", setup() { const selectedValue = ref<number | null>(null); // 初始化为null function handleChange(value: number): void { console.log(`Selected option changed to ${value}`); } function clearSelection():void{ selectedValue.value = null; } return { selectedValue, handleChange, clearSelection }; }, }); </script> ``` 上述代码展示了如何利用组合 API (Composition API) 来管理响应式的 selectedValue 变量,并且提供了清除所做择的方法。当点击 Clear Selection 按钮时会触发 clearSelection 函数执行,进而将 selectedValue 设置成初始状态即 null[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值