vue3使用表单el-form的坑+el-input无法输入+el-date-picker选择时间不能赋值

 遇到一个大坑，弄了好几个小时才找到问题。

vue3使用el-form的时候，如下代码，会导致输入框无法输入，无法赋值，选择框无法选择

<el-form class="my-form" ref="form" :model="form" label-width="80px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动时间">
      <el-date-picker
        type="date"
        placeholder="选择日期"
        v-model="form.date"
        style="width: 100%;"
        value-format="YYYY-MM-DD"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>

    setup() {
      const state = reactive({
        form: {
          name: '1',
          date: '',
          desc: ''
        }
      })

      function onSubmit() {

      }

      return {
        ...toRefs(state),
        onSubmit
      }
    }

是什么引起来的呢？

由于ref命名和model一样导致出现了这样的问题

原因就是el-form声明了ref="form",导致state中声明的form被覆盖，有冲突了，修改ref="form1"或者model="formData"（这个名字大家随便起啦）问题解决

那么为什么他俩会冲突呢我也不知道，求大佬指导，以后要是知道了我在来更新

解决方法

既然知道冲突了，解决方法就是改名喽

我是修改为如下就可正常执行了

<el-form class="my-form" ref="form" :model="formData" label-width="80px">
    <el-form-item label="活动名称">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="活动时间">
      <el-date-picker
        type="date"
        placeholder="选择日期"
        v-model="formData.date"
        style="width: 100%;"
        value-format="YYYY-MM-DD"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input type="textarea" v-model="formData.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>

setup() {
      const state = reactive({
        formData: {
          name: '1',
          date: '',
          desc: ''
        }
      })

      function onSubmit() {

      }

      return {
        ...toRefs(state),
        onSubmit
      }
    }