vue前端传空值、空字符串的问题及解决

 更新时间:2022年06月01日 10:42:10   作者:ppandpp  
这篇文章主要介绍了vue前端传空值、空字符串的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue前端传空值及空字符串问题

在与后端调试接口时,经常接口里的参数会有空值,如果每次都要后端写判断,代码容易冗余。 

所以就在前端做判断,在传值时先判断接口参数是否为空,为空则不传,有值则传参。

这里的例子是vue 列表接口获取全部列表值

一般列表页面都做了搜索和分页功能,所以带的参数就有:搜索字段、当前页码、页码最大数值(param,pageNo,pageSize)只是举例,不一定是一模一样

在加载列表接口时,这些条件会拼接到接口url中,所以要对搜索字段进行判断,是否有值

1.先定义param,当做接口参数,里面存放搜索字段和分页字段

2.对搜索字段进行判空操作,如果有值,则存入param,加载时会拼接到接口url中

(哪个字段有值拼哪个)

列表接口如下

export function getTbComponentList(params) {
    return request.get('/compmgr/components', {params})
}

效果如下 :

vue空值报错问题

如上图所示,提示percent为空,web效果图如下

如果是自测阶段不想麻烦就直接在数据库添加数据就行或者或者初始化方法赋初始值,最简便的还是在vue template里进行判断

代码如下:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Element-UI中上传的文件前端处理

    详解Element-UI中上传的文件前端处理

    这篇文章主要介绍了详解Element-UI中上传的文件前端处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue如何重置data的所有属性

    vue如何重置data的所有属性

    这篇文章主要介绍了vue如何重置data的所有属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 一文详细聊聊vue3的defineProps、defineEmits和defineExpose

    一文详细聊聊vue3的defineProps、defineEmits和defineExpose

    vue3官方文档defineProps和defineEmits都是只能在scriptsetup中使用的编译器宏,下面这篇文章主要给大家介绍了关于vue3的defineProps、defineEmits和defineExpose的相关资料,需要的朋友可以参考下
    2023-02-02
  • vue.js利用Object.defineProperty实现双向绑定

    vue.js利用Object.defineProperty实现双向绑定

    这篇文章主要为大家详细介绍了vue.js利用Object.defineProperty实现双向绑定,帮大家解析神秘的Object.defineProperty方法
    2017-03-03
  • vue2使用el-date-picker实现动态日期范围demo

    vue2使用el-date-picker实现动态日期范围demo

    这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue请求后端接口导出excel表格方式

    Vue请求后端接口导出excel表格方式

    这篇文章主要介绍了Vue请求后端接口导出excel表格方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue 开发一个按钮组件的示例代码

    vue 开发一个按钮组件的示例代码

    本篇文章主要介绍了vue 开发一个按钮组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue中v-for加载本地静态图片方法

    vue中v-for加载本地静态图片方法

    下面小编就为大家分享一篇vue中v-for加载本地静态图片方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue编译优化实现流程详解

    Vue编译优化实现流程详解

    编译优化指的是编译器将模板编译为渲染函数的过程中,尽可能多的提取关键信息,并以此指导生成最优代码的过程,优化的方向主要是区分动态内容和静态内容,并针对不同的内容采用不同的优化策略
    2023-01-01
  • vue.js表格组件开发的实例详解

    vue.js表格组件开发的实例详解

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,所以本文将从各方面对Vue.js的组件开发做一个深入介绍。有需要的朋友们可以参考借鉴。
    2016-10-10

最新评论