Share the journey of a certain debugger

1. Cause

1.1 Phenomenon

1.2 Code:

<Form  ref="formRef" :model="formState" style="padding-left: 8px;margin-bottom: 20px" :rules="rules">
    <Form-item label="角色名" name="roleName">
      <Input v-model:value="roleName" style="width: 200px"/>
    </Form-item>
    <Form-item label="状态" name="roleStatus" v-if="type==='add' || type==='edit'">
      <RadioGroup v-model:value="roleStatus" >
        <Radio :value="1">启用</Radio>
        <Radio :value="0">禁用</Radio>
      </RadioGroup>
    </Form-item>
  </Form>

... js
const formState = reactive({
      roleName: '',
      roleStatus: 1
    })
 const rules = {
      roleName: [{ required: true, message: '请填写角色名', trigger: 'blur' }],
      roleStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }]
    }
...

2. Gradually get crazy

After more than half an hour repeatedly comparing the official use cases and the code written before
After constant attempts
I am 99.99% sure that there is nothing wrong with my code
, why does it say that the status is not selected, and keeps letting me choose the status MDZZ

3. Progress

Although I can circumvent this problem by canceling the required verification of the sleepwear product, but this is not in line with my style.
Pick up your mentality and get back on the road.
Let's start with debug from this warning

index.js?2a95:120 async-validator: ["'${name}' is not a valid ${type}"]

Click in first, make a break

Then reproduce the error and find the call stack

The method at the bottom of the stack is the method you wrote, and the method at the top of the stack is the library method. If you have time, you can look at the general process step by step.
Several functions at the top of the stack I directly looked at

4. The truth

The method is to interrupt the observation


First of all, this type: string makes me a little bad association. Where did the Nima come from? The string used in the official website use case, I used to pass the back-end parameter convenient number, this time I paid attention to it during repeated comparisons, but it did not arouse my alarm. Normally, this parameter is basically not added.


Continue to debug and call the string method.

In the string method, type is called again and my error is pushed in.


Then I realized that it was probably a type error, but can Nima not report my custom error, can't I report a type error, and interfere with my debbuge direction?

Solution: add a type. Perfect solution

const rules = {
      roleName: [{ required: true, message: '请填写角色名', trigger: 'blur' }],
      roleStatus: [{ type: 'number', required: true, message: '请选择状态', trigger: 'blur' }]
    }

5. Summary

There are bugs in the cloud. It is recommended to debug the source code in the error stack, which is faster.