在给单选框添加事件的时候出现了一个问题
看代码:
<template>
<div >
<input type="radio" @click="test" v-model="userLoginForm.code" value="1" id="psd"><label for="psd"></label>学生
<input type="radio" @click="test" v-model="userLoginForm.code" value="2" id="psd"><label for="psd"></label>管理员
</div>
</template>
import { reactive } from 'vue'
export default {
name: 'Login',
setup () {
const userLoginForm = reactive({
code: ''
})
const test = async () => {
alert(userLoginForm.code)
}
return {
userLoginForm,
test
}
}
}
</script>
结果:
![](https://i-blog.csdnimg.cn/blog_migrate/95fae7f0d2322d4ecce7865fab3b14fd.png)
我点击的是管理员预期弹出是2结果弹出是1
把@click改成@change事件之后
结果:
![](https://i-blog.csdnimg.cn/blog_migrate/9d138fb64a24ca6b9afd51ebe9db89ba.png)
这回就正常了
原因: @change 是在内容改变的时候触发 @click是在点击的时候触发,此时内容还没有改变