vue3+ElInput 无法输入的问题
开篇
写业务的时候发现，因为想偷懒嘛，直接就在想在外部去定义一个变量，然后写个弹窗里（tsx）的 el-input，而不是又去写个 vue 页面，但发现就输入不了了，而且跟着文档写 textarea 没有字数统计。就两个问题嘛
1.el-input 无法输入
TSX 的写法嘛，最开始我是这么写的
const auditText = ref(''); // 忽略代码<ElInputmodel-value={auditText.value}autosize={{ minRows: 5, maxRows: 10 }} max-length={50}placeholder="请填写审核不通过原因（最少五个字）"show-word-limittype="textarea" />
复制代码
然后发现真是一点反应没有啊，然后看了下文档上面的这句话
const auditText = ref<string>('');function test(value) { console.log(value); auditText.value = value;}//忽略代码<ElInput model-value={auditText.value} onInput={test} autosize={{ minRows: 5, maxRows: 10 }} max-length={50} placeholder="请填写审核不通过原因（最少五个字）" show-word-limit type="textarea"/>
复制代码
但是那其实也不用这么麻烦人文档里也写得很清楚了v-model就行
<ElInput v-model={auditText.value} autosize={{ minRows: 5, maxRows: 10 }} max-length={50} placeholder="请填写审核不通过原因（最少五个字）" show-word-limit type="textarea"/>
复制代码
2.字数统计不见了
先看看官网的写法，定义个 maxlength 再定义个 show-word-limit 就有字数统计了
可是如果我在 tsx 里按官网这么写会发生什么那
果然吗,不是 props 的属性就不用写了,原生事件是直接绑定在 attrs 上给 input 标签的，所以写在 tsx 里会报错，写在模版里不会。暂时就忽略这一行检查把~~~。
总结
平时会记录一些简单但好玩的问题，水一篇 vue，每天一篇 vue 一篇 react。
关于我的一些介绍
评论