V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
谷否 | 三分谷地,为你喜欢
AI 大模型 + 柔性供应链,不仅可以为你测试香水味道,还能一件定制实体香水,快速发货。
Promoted by wuqiwen
leia
V2EX  ›  Vue.js

vue3+ELInput 无法输入的问题

  •  
  •   leia · 16 天前 · 633 次点击

    vue3+ElInput 无法输入的问题

    image

    开篇

    写业务的时候发现,因为想偷懒嘛,直接就在想在外部去定义一个变量,然后写个弹窗里( tsx )的 el-input ,而不是又去写个 vue 页面,但发现就输入不了了,而且跟着文档写 textarea 没有字数统计。就两个问题嘛

    image

    1.el-input 无法输入

    TSX 的写法嘛,最开始我是这么写的

    const auditText = ref('');
      // 忽略代码<ElInputmodel-value={auditText.value}autosize={{ minRows: 5, maxRows: 10 }}
        max-length={50}placeholder="请填写审核不通过原因(最少五个字)"show-word-limittype="textarea"
      />
    

    然后发现真是一点反应没有啊,然后看了下文档上面的这句话

    image

    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"
    />
    

    image

    但是那其实也不用这么麻烦人文档里也写得很清楚了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 就有字数统计了

    image

    可是如果我在 tsx 里按官网这么写会发生什么那

    image

    image

    image

    果然吗,不是 props 的属性就不用写了,原生事件是直接绑定在 attrs 上给 input 标签的,所以写在 tsx 里会报错,写在模版里不会。暂时就忽略这一行检查把~~~。

    总结

    平时会记录一些简单但好玩的问题,水一篇 vue ,每天一篇 vue 一篇 react 。

    关于我的一些介绍

    2 条回复    2025-06-25 17:55:38 +08:00
    chiaoyuja
        1
    chiaoyuja  
       16 天前
    图没了
    shakukansp
        2
    shakukansp  
       16 天前
    你第一个写法就有点离谱了

    像是没自己封装过带 v-model 的自定义组件一样
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2548 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 13:46 · PVG 21:46 · LAX 06:46 · JFK 09:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.