vue在input中输入后，按回车，提交数据

骨子里的偏爱

已于 2023-04-06 17:10:58 修改

阅读量4.3k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-04-06 16:48:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41823246/article/details/129993339

版权

vue 专栏收录该内容

54 篇文章

订阅专栏

文章介绍了在Vue应用中，如何通过监听input元素的keyup.enter事件，在用户按下回车键时调用自定义方法toAddName，将input输入的内容添加到表格数据中。输入的值被绑定到v-model的toAddNameText，并在方法中将新数据push到tableData数组。如果id由后台随机生成，则编辑和删除操作需重新请求后台数据以保持同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue在input中输入后，按回车，提交数据

1.展示效果如下：
在这里插入图片描述

在这里插入图片描述

2.代码展示：

   <div>
            <el-input v-model="toAddNameText" @keyup.enter.native="toAddName()" placeholder="回车，即新增该竖杆名称" clearable></el-input>
          </div>

在return data:

 toAddNameText: '' // 回车新增名称

在methods：

 toAddName  () {
                console.log('新增名称', this.toAddNameText)
                console.log('获取到当前的弹框数据', this.tableData)
                this.tableData.push({
                    id: '110',
                    name: '张三'
                })
            }