最近用vue3 element plus 进行开发,发现el-input 无法输入,代码如下:
<template><el-card><template #header><div class="card-header"><el-form ref="searchForm" :model="searchForm" label-width="80px"><el-form-item label="成员"><el-input :model="searchForm.memberKey" placeholder="请输入成员姓名/员工ID/手机号码"></el-input></el-form-item></el-form></div></template></el-card></template><script setup>import { reactive } from 'vue'// 搜索参数const searchForm = reactive({memberKey: ''})</script>
排查许久,发现主要有两个原因
1、ref和v-model的值冲突了。
2、element plus 官方文档el-form 用的是:model,很容易el-input 就跟着写:model, 应该用v-model