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:'爬山'}
		}
	  }
 }

希望对你们有所帮助

相关推荐
月光宝盒造梦师1 分钟前
Ant Design Ellipsis 中的判断逻辑 isEleEllipsis 方法非常消耗性能
javascript·react·优化
gechunlian8815 分钟前
SpringBoot3+Springdoc:v3api-docs可以访问,html无法访问的解决方法
前端·html
驾驭人生31 分钟前
ASP.NET Core 实现 SSE 服务器推送|生产级实战教程(含跨域 / Nginx / 前端完整代码)
服务器·前端·nginx
酉鬼女又兒1 小时前
零基础快速入门前端ES6 核心特性详解:Set 数据结构与对象增强写法(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·es6
慧一居士1 小时前
Vue项目中,子组件调用父组件方法示例,以及如何传值示例,对比使用插槽和不使用插槽区别
前端·vue.js
我是伪码农1 小时前
HTML和CSS复习
前端·css·html
林恒smileZAZ1 小时前
前端实现进度条
前端
前端老石人2 小时前
邂逅前端开发:从基础到实践的全景指南
开发语言·前端·html
阿珊和她的猫2 小时前
以用户为中心的前端性能指标解析
前端·javascript·css
木心术12 小时前
OpenClaw网页前端开发与优化全流程指南
前端·人工智能