- 需求描述:页面radio点击的时候,先不改变radio的值,先弹出框进行判断是否符合一定的条件如果符合则发生变化,否则radio不发生变化,页面还显示原来的值。
- 问题难点:在vue项目中,使用
-
<el-radio v-model="radio" label="1">备选项1</el-radio> <el-radio v-model="radio" label="2">备选项2</el-radio>
- 存在问题v-model并不能截取到点击后,变化前的操作,事实上是点击“备选项2”的时候,radio的值已经变成2了才能执行@change的事件,因为change事件就是值发生变化才会执行的事件。
- 假设我们element的el-radio中有before-change事件就好了,但是没有。
- 所以换种思路解决。想到v-model的分解式
-
- v-model的分解式 :value @Input
- 将页面中的v-model改为最原始的写法
-
<template> <el-radio :value="radio" @input=InputHandle($event) label="1">备选项1</el-radio> <el-radio :value="radio" @input=InputHandle($event) label="2">备选项2</el-radio> </template> <script> export default { data () { return { radio: '1' }; } methods: { InputHandle(val) { this.$confirm(' 是否改变当前值?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.radio = val }).catch(() => { this.$message({ type: 'info', message: '已取消' }); }); } } } </script>
- 运用到项目中-简单实用不含@change
- 运用到项目中-复杂使用包含@change
标签:选项,el,发生变化,点击,radio,符合,model,change From: https://www.cnblogs.com/evident/p/17571989.html