项目开发难点-要求el-radio组件实现点击切换的时候，先弹出框判断是否符合条件，如果符合radio的值发生变化，不符合则不变。解决方法v-model的分解式 :value @Input

• 需求描述：页面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