vue--添加商品，清空表单的注意事项

最新推荐文章于 2024-05-27 09:30:11 发布

jr2319

最新推荐文章于 2024-05-27 09:30:11 发布

阅读量495

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_51040108/article/details/127269928

版权

本文介绍了在Vue中点击添加商品后如何正确清空表单内容，强调不能直接清空存储商品信息的对象属性，因为这会导致无法将信息保存到数组中。原因在于模板渲染的异步性质与同步的清空操作冲突。解决办法是将商品信息对象赋值为一个新的空对象，确保双向绑定的数据能够被正确更新。

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

1、背景：点击添加商品后，表单上写的商品信息都要清空

2、问题：清空的方法不能是将存储表单商品信息的对象内的每个属性值依次清空，不然不会存储到所有商品信息的数组内

3、原因：模板渲染是异步渲染，而清空表单上写的商品信息是同步执行的，所以会把表单商品信息清掉，存储不进渲染商品信息的数组内

4、解决方法：清空方法为给商品信息对象赋值为空对象

5、注意：即时创建一个空对象来承接v-model内的内容也可以

与v-model建立的双向绑定，会根据控件类型，自动选取正确方法来更新元素

<!-- Form 表单 -->
			<form class="y-form">
				<div class="y-form-item">
					<label for="id">序号:</label>
					<input type="text" class="y-input-parmary"  v-model="info.id"/>
				</div>
				<div class="y-form-item">
					<label for="name">书名:</label>
					<input type="text" class="y-input-parmary" v-model="info.name"/>
				</div>
				<div class="y-form-item">
					<label for="price">价格:</label>
					<input type="text" class="y-input-parmary" v-model.number="info.price" />
				</div>
				<div class="y-form-item">
					<label for="num">数量:</label>
					<input type="text" class="y-input-parmary" v-model.number="info.num" />
				</div>

				<div class="y-form-item">
					<a href="#" class="y-btn-primary" @click="onAddBook">添加</a>
				</div>
			</form>
		</div>

		<script src="./lib/vue.global.js"></script>
		<script>
			const { createApp } = Vue
			const vm = createApp({
				data() {
					return {
						list: [
							{ id: 1001, name: 'vue高级编程', price: 88.88, num: 2 },
							{ id: 1002, name: 'react高级编程', price: 98.48, num: 1 },
							{ id: 1003, name: 'js高级编程', price: 68.08, num: 3 },
						],
						// total: 100,
						info:{id:'',name:'',price:'',num:''},
						// info:{},
						//如果info为空对象，与v-model建立的双向绑定，会根据控件类型，自动选取正确方法来更新元素
					}
					
				},
				methods: {
					onAddBook() {
                       this.list.push(this.info)
					  this.clear()
					},
					onDeleteBook(id) {
					  let info=	this.list.find(item=>item.id==id)
					  let index= this.list.indexOf(info)
					  this.list.splice(index,1)
					},
					//清空表单
					clear(){
						this.info={}
						// this.info.id=''
						// this.info.name=''
						// this.info.price=''
						// this.info.num=''
					},