处理数据,传参时,如果某些参数没有值,就不传这个字段

文章展示了如何在Vue.js应用中处理表单提交,通过删除空值参数来优化API请求。使用JavaScript的`delete`关键字可以从对象中移除无值属性,确保只有非空字段被传递到服务器。此外,还讨论了将默认值设为`null`以便在提交时更精确地过滤无效数据的做法。

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

如果某些参数没有值,您可以在发送请求之前过滤掉这些空值参数。具体来说,您可以使用 JavaScript 中的delete关键字,从参数对象中删除值为空的属性。

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age" />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </div>
</template>

<script>
import { saveUser } from './api';

export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        age: ''
      }
    };
  },
  methods: {
    async submitForm() {
      try {
        // 过滤空值参数
        const params = Object.assign({}, this.form);
        for (const key in params) {
          if (!params[key]) {
            delete params[key];
          }
        }
        await saveUser(params);
        this.$message.success('保存成功!');
      } catch (error) {
        console.error(error);
        this.$message.error('保存失败,请稍后重试。');
      }
    }
  }
};
</script>

在这个示例中,我们定义了一个名为submitForm的方法来提交表单。在方法内部,我们使用Object.assign方法将表单数据复制到一个新的对象中。然后,我们使用for-in循环遍历这个新对象的属性,并使用delete关键字删除值为空的属性。最后,我们将这个过滤后的参数对象传递给saveUser方法。

其他

这些属性的默认值为0也会带来一些问题。你可以将这些属性的默认值设为null,然后在处理提交表单数据时,判断这些属性是否有值,如果有值就将其添加到请求参数中,否则不添加这些属性到请求参数中。

export default {
  data() {
    return {
      queryForm: {
        chat_id: 3,
        query: '生成新海诚视频电影盘点',
        name: '',
        config: {
          type: 'cot',
          query_rewrite: null,
          switch: null,
          copyright: null,
          control: 'general-ttv',
          dasou: null
        }
      }
    };
  },
  methods: {
    handleSubmit() {
      // 处理需要提交的数据
      const dataToSubmit = Object.assign({}, this.queryForm);
      const config = dataToSubmit.config;
      // 判断config中哪些属性有值,有值就添加到请求参数中
      if (config.type) {
        params.config.type = config.type;
      }
      if (config.query_rewrite !== null) {
        params.config.query_rewrite = config.query_rewrite;
      }
      if (config.switch !== null) {
        params.config.switch = config.switch;
      }
      if (config.copyright !== null) {
        params.config.copyright = config.copyright;
      }
      if (config.control) {
        params.config.control = config.control;
      }
      if (config.dasou !== null) {
        params.config.dasou = config.dasou;
      }
      console.log(dataToSubmit);
      // 提交数据
    }
  }
}

上述代码中,我们将query_rewriteswitchcopyrightdasou四个属性的默认值都设置为null。在提交表单数据时,我们先将queryForm对象复制到一个新的对象dataToSubmit中。然后,我们判断config中哪些属性有值,有值就将它们添加到请求参数params中。判断是否有值的条件是,如果属性的值为null,则表示用户没有选择这个选项,这时就跳过这个属性,不将其添加到请求参数中。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值