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

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
      }
    }

Logo

前往低代码交流专区

更多推荐