vue实现回车添加数据并记录输入的个数

最新推荐文章于 2023-04-29 10:29:52 发布

谢小丹

最新推荐文章于 2023-04-29 10:29:52 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43747906/article/details/108239087

版权

该博客探讨了如何在Vue应用中实现输入框回车添加数据功能，并实时记录输入数据的个数。通过将回车触发的数据转换为数组，监听输入并替换回车符，同时使用watch方法来跟踪数组长度，以实现计数。文章提到了在最后一组数据输入后回车可能导致计数错误的问题，并提出了通过三目运算符进行判断的解决方案。

摘要由CSDN通过智能技术生成

期望实现效果：

在输入框输入数据，回车代表一组数据输入完毕，输入的同时记录输入的个数。

思考：

（1）回车代表一组数据输入完毕，要把所有的数据传给后端，可以把回车输入的数据转化为数组的形式，再根据后端的需要做数据处理。
（2）监听输入的数据，回车添加及删除，所以最好用@input，边输入就边把回车替换了，并且删除的行为也能监听到变化
（3）要记录输入的个数，需要实时监听，就要在watch方法里监听数组长度。但是这样有一个问题，最后一组数据输完之后回车，数量会加1，但是其实没有输入数据，所以需要做一个三目判断。

<template>
   <div>
	   	<el-input
	         type="textarea"
	         :rows="4"
	         @input="watchValue"
	         placeholder="请输入设备号"
	        v-model=