1. Problem background

When using the El form in vue3, the following code will cause the input box to be unable to input, the value cannot be assigned, and the selection box cannot be selected

<el-form ref="service" :model="service" label-width="80px">
    <el-form-item label="NAME">
      <el-input v-model="service.name"></el-input>
    </el-form-item>
    ......
</el-form>

setup() {
　　const state = reactive({
　　　　service: {
　　　　　　name: '**'
　　　　}
　　})
　　return {
　　　　...toRefs(state)
　　}
}

The repetition of the name of the response variable declared by ref component instance and ref() will lead to the invalidation of the response. Any form content of the form cannot be entered, and an error will be reported: uncaught (in promise) typeerror: cannot read property ‘name’ of undefined, etc

2. Problem causes and Solutions

This problem arises because the ref naming is the same as the model. The reason is that El form declares ref = “service”, which causes the service declared in state to be overwritten, and the two conflict.

Modify the name (such as ref = “serviceform” or model = “serviceinfo”) to solve the problem.