首页 > 其他分享 >vue做多选,传递数组类型到后端

vue做多选,传递数组类型到后端

时间:2023-04-16 12:13:28浏览次数:31  
标签:vue 做多选 ids 数组 使用 model 接收

1.需求:多选框选择多个类型,把选中的数据传递到后端

当初在做多选框,直接用了element-ui里面的el-check-box属性,在官网里面说,是使用v-modol绑定数值来传递,好嘛,,,传的一直是true!!不是我想要的数据,也是很久没使用vue框架了,做的时候很是怀疑自己,使用value来绑值?使用v-model?使用v-bind???一直试,好痛苦,传个值都不会了。。。。

解决:

后来查了很多,说用input来传,type类型为checkbox,好了,值拿到的终于不是true了!!!,但是怎么把选中的值放到数组,v-model和value配合使用,v-model绑定数组,value来传值,终于!!!

原因:

做这个为啥子这么艰难,因为自己之前完全误解了v-model的意思,现在理解是用来绑定参数,然后显示,相当于是一个空数组,然后选中,就有值进去了,不是所谓的一个一个加进去!!

 <el-form-item >
                <input type="checkbox" v-model="newIndex" value="6">世界杯
                <input type="checkbox" v-model="newIndex"  value="4">财经
                <input type="checkbox" v-model="newIndex"  value="2">热点
                <input type="checkbox" v-model="newIndex"  value="3">视频
                <input type="checkbox" v-model="newIndex"  value="5">科技
            </el-form-item>

   data() {
     return {
        newIndex:[],
     }
   },

 

 

2.提交数据

后端如何接收数组类型数据

在postman测试,还去特地的查了一下post怎么传数组类型来着

 然后,没毛病,查询成功了!!玩会手机~

 

但是,到与前端联调时,报错了Required request parameter 'ids' for method parameter type List is not present

后面说是不能用requestparam来接收,我当时是这样接收的

@RequestParam("ids") List<String> ids

解决:

后来改成用requestbody接收,成功了

@RequestBody List<String> ids

 

原因:

传数组,前端传的是表单数据,如果是get方法,可以使用RequestParam来接收,如果是post方法,得使用RequestBody 来接收

菜鸟的碎碎念,记录一下

标签:vue,做多选,ids,数组,使用,model,接收
From: https://www.cnblogs.com/pilpill/p/17323001.html

相关文章

  • Vue2.0 学习 第三组 条件语句
    本笔记主要参考菜鸟教程和官方文档编写。1.v-if在div或者之类的dom中使用v-if可以控制是否插入该dom,控制由v-if的true和false决定。如:<divid="app"><divv-if="test"></div></div><script>newVue({el:"#app",data:{test:true}})</script>2.v-show......
  • 【前缀和】LeetCode 523. 连续的子数组和
    题目链接523.连续的子数组和思路参考宫水三叶大佬题解一开始以为和Leetcode53MaximumSubarray思路差不多,都是求子数组的值。但是后来发现在53题中并没有求出每个子数组的和,只是在贪心的情况下求出了可能的最大和代码classSolution{publicbooleancheckSubarra......
  • 数组
      数组扩容:调用的jvm中arraycopy(原,从哪开始,目标,目标起始位置,长度) ......
  • 实验4 数组应用编程
    task1_1#include<stdio.h>#defineN4intmain(){ inta[N]={2,0,2,3}; charb[N]={'2','0','2','3'}; inti; printf("sizeof(int)=%d\n",sizeof(int)); printf("sizeof(char)=%d\n",sizeo......
  • vue2源码-五、将模板编译解析成AST语法树2
    生成render函数前言上篇,生成ast语法树,而这篇使用ast语法树生成render函数。exportfunctioncompileToFunction(template){//1,将模板编译称为AST语法树letast=parserHTML(template);//2,使用AST生成render函数letcode=codegen(ast);}生成r......
  • 数组中出现次数超过一半的数字
    classSolution{public:intmoreThanHalfNum_Solution(vector<int>&nums){intcnt=0,val=-1;//val给一个无效值即可for(autox:nums){if(!cnt)//投票最多人没了,接下来任何人都可以竞选{val=x;......
  • Vue3中(vite.config.js)配置打包的时候去除console.log
    参考:https://www.cnblogs.com/lovewhatIlove/p/16476165.html安装tersernpmadd-Dterservite中配置import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importvueJsxfrom"@vitejs/plugin-vue-jsx";importvisua......
  • 新手适合用什么Vue组件库?TinyVue组件库好用吗?
    对于刚接触前端领域的同学,绕不开选择组件库的问题,常见的Vue组件库如下:Vuetify组件库。一个纯手工精心打造的Material样式的组件库。文档全,但是纯英文的官网还是会让一些同学望而却步。2016年发布。Ant-design-vue组件库。AntDesign的Vue实现,组件的风格与AntDesign保......
  • 3.Vue3.0 有什么更新
    1.监测机制的改变3.0将带来基于代理Proxy的observer实现,提供全语言覆盖的反应性跟踪。消除了Vue2当中基于Object.defineProperty的实现所存在的很多限制。2.只能监测属性,不能监测对象检测属性的添加和删除;检测数组索引和长度的变更;支持Map、Set、WeakMap和Weak......
  • Vue3组合API自动引入插件
    插件名:unplugin-auto-importurl:https://github.com/antfu/unplugin-auto-import安装1、下载插件npmiunplugin-auto-import-D2、配置vite.config.tsimportvuefrom'@vitejs/plugin-vue'import{defineConfig}from'vite'//引入插件,因为我使用的vite+ts,所以这里引......