vue 提交表单抹除字段为空的数据

使用背景

在配合后端post请求接口的时候 仅需要将有值的字段传入接口中

关键代码

javascript 复制代码
cleanDataObj(obj) {
      Object.keys(obj).forEach((key) => {
        if (obj[key] === '') {
          delete obj[key]
        }
      })
    },

demo如下

javascript 复制代码
export default {
  data() {
    return {
    	demoObject:{
			name:'小花',
			sex:'',
			hobby:'爬山',
			}
		}
    },
    methods:{
		cleanDataObj(obj) {
      		Object.keys(obj).forEach((key) => {
        		if (obj[key] === '') {
          			delete obj[key]
        			}
      			})
    		},

		demoHandle(){
		let needObject =  this.cleanDataObj(this.demoObject)
		console.log(needObject)
        // 结果为 {name:'小花',hobby:'爬山'}
		}
	  }
 }

希望对你们有所帮助

相关推荐
BillKu24 分钟前
Vue3 + TypeScript 的 Hooks 实用示例
前端·vue.js·typescript
植物系青年28 分钟前
前端玩数据库 👏 MongoDB/Mongoose 入门指南(下)
前端·mongodb·mongoose
程序饲养员31 分钟前
React从前的SPA(CSR)到现在的SSR和SSG原理解析
前端·javascript·前端框架
植物系青年32 分钟前
前端玩数据库 👏 MongoDB/Mongoose 入门指南(上)
前端·mongodb·mongoose
不懂装懂的不懂32 分钟前
【 vue + js 】引入图片、base64 编译显示图片
前端·javascript·vue.js
杨超越luckly1 小时前
HTML应用指南:利用GET请求获取全国汉堡王门店位置信息
大数据·前端·信息可视化·数据分析·html
搏博1 小时前
在WPS中通过JavaScript宏(JSA)调用DeepSeek官网API优化文档教程
javascript·人工智能·windows·深度学习·机器学习·wps
CCChaya-软件技术教师2 小时前
24-栅格布局详解(CSS3)
前端·css·css3
BillKu2 小时前
el-input 中 select 方法使用报错:属性“select”在类型“HTMLElement”上不存在
前端·javascript·vue.js·elementui
涵信2 小时前
第一节:React 基础篇-React虚拟DOM原理及Diff算法优化策略
前端·javascript·react.js