精华内容
下载资源
问答
  • }, } 为什么我这个数组里循环获取后台数据在console.log下能看到数据但是在页面list是空的,用this.$set来赋值都没有? 是不是这个循环会有问题? 回答 你一开始都没有那个属性,data 里你应该是 tableList:[],this....

    methods: {

    init() {

    this.getData();

    },

    getData() {

    this.$api.ajax({

    type: 'post',

    url: 'sss',

    success:(res)=> {

    if(res.list && res.list.length) {

    this.tableList = res.list;

    this.tableList.map((item,index)=>{

    item.list = [];

    this.getListInfo(index, item);

    })

    }

    }

    });

    },

    getListInfo(index, item) {

    this.$api.ajax({

    type: 'post',

    url: 'ttt',

    data: {

    id: item.id,

    },

    success:(res)=> {

    this.tableList[index].list = res;

    console.log(this.tableList); //这里能看到最新的list数据

    }

    });

    },

    }

    为什么我这个数组里循环获取后台数据在console.log下能看到数据但是在页面list是空的,用this.$set来赋值都没有?

    是不是这个循环会有问题?

    回答

    你一开始都没有那个属性,data 里你应该是 tableList:[],this.tableList[index].list这样你只会更新数据,但不会触发视图,你可以初始化或者用一个对象接收tableList,然后this.tableList = obj;

    还有个问题,你这个循环请求如果数据量大的话,超过了浏览器并发请求,可能部分请求会失败,或者造成请求数据响应快慢造成排序错乱问题(比如翻页这种,你可能会先请求到第2页,然后第1页),建议使用promise,队列执行。

    map改成forEach

    this.tableList.map((item,index)=>{

    this.$set(this.tableList[index], list, []); // 或者this.$set(item, list, []);

    this.getListInfo(index, item);

    })

    对象新增属性是无法响应式,通过set确保这个新 property 同样是响应式的

    展开全文
  • 一般我都是直接renturn 数组的 其实也没啥问题 但是还是感觉第三种写 ... ajax请求后弹开新页面被浏览器拦截 window.open()我想应该很多人都不陌生吧,它可以实现除用a标签以外来实现打开新窗口! 最近开发项目用到时...

    记录bug

    为什么 ajax 获取到了 vm.$data.list

    页面上却没有显示出来的?

    代码

    //页面

    {{ *** }}

    //请求数据

    send: function(){

    var that = this,

    vm = that._vm,

    data = vm.ajaxData;

    $Le.smp.goAjax({

    Go: Go,

    Dialog: Dialog

    }, {

    url:$Le.Config.api.list.list

    ,type: 'get'

    ,data:data

    ,total:0

    ,postJSON: false

    ,beforeSend: function(){

    $Le.smp.createLoading();

    }

    ,success: function(json){

    that._vm.$data.list = json.data.list;

    console.log(that._vm.$data.list);

    }

    });

    分析

    ajax 请求后,打印出 list 数据,数据是ajax请求的新数据

    屏蔽显示显示不出来部分,在页面上其他地方,循环打印 list 可以打印出,说明不是数据问题,是页面部分问题

    检测语法错误,之前出现过一次,是因为avalon 转成 Vue, 残留了avalon语法

    语法没问题,分段屏蔽html

    最后发现是 filter 问题,之前也出现过!!写过滤器怎么老出问题,filter语法容易出错么!

    Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法

    问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...

    React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

    ajax请求获取的数据无法赋值给全局变量问题总结

    一.总结: 1.问题描述: 今天做项目遇到在用表单显示详细信息的过程中ajax请求获取的数据无法赋值给全局变量的情况,从列表页面进入详情页,在详情页面被渲染了之后就会调用js文件里的接口向服务器请求数 ...

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

    二、Ajax请求MVC中数据查询表返回datatable

    一.Ajax请求MVC中数据查询表返回datatable 解决方式 返回list

    laravel 对于ajax请求返回的数据

    ajax在调试器中的位置  XHR 代表 XMlHTTPREQUET 一般ajax请求php的时候我们需要给返回什么数据呢? 一般我都是直接renturn 数组的 其实也没啥问题 但是还是感觉第三种写 ...

    ajax请求后弹开新页面被浏览器拦截

    window.open()我想应该很多人都不陌生吧,它可以实现除用a标签以外来实现打开新窗口! 最近开发项目用到时,却遇到了麻烦,本来好好的弹出窗口,结果被浏览器无情的给拦截了! 代码如下: $.ge ...

    jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo

    一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...

    jquery ajax请求成功,数据返回成功,seccess不执行的问题

    1.状态码返回200--表明服务器正常响应了客户端的请求:       2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据.         ...

    随机推荐

    带参方法的执行:普通方法的查询,可为空方法的查询。批量处理SQL语句。

    普通方法的查询: @Override public List> selectSpentAmount(Integer MAT_TYPE_, ...

    【Telerik】查询控件<telerik:RadMaskedTextBox>的使用

    在SilverLight项目中,实现模糊查询,并将值绑定到列表中,使用了Telerik中的控件. 要先添加命名空间的引用: xmlns: ...

    CSS轮廓outline

    http://www.cnblogs.com/xiaohuochai/p/5277416.html

    【VLC-Android】vlc-android简例

    前言 继续折腾vlc,做这个例子并不顺利,卡在只有声音没有图像这个问题好久,网上的例子有些API已经对不上,继续分享,,, 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cn ...

    SQL Server Profiler:使用方法和指标说明

    SQL Server Profiler的中文意思是SQL Server事件探查,一个Sql的监视工具,可以具体到每一行Sql语句,每一次操作,和每一次的连接.感觉这个工具的作用还是很大的,给大家分享一 ...

    安卓获取Assets目录下的资源

    获取Assets目录下的资源 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 ! ...

    一个想法照进现实-《IT连》创业项目:聊聊最近两三事

    今天打算写一篇断流水式的作文,哈,不按常规的写格式文了. 话说创业到现在,也快近半年了,时间那是飘的一个字:快! 从设想的很多很远,到被人不断告知要单点突破:从美好的远景,到现实艰难的执行:创业更像是 ...

    Liferay7 BPM门户开发之3: Activiti开发环境搭建

    下载地址: http://activiti.org/download.html 源码: https://github.com/Activiti/Activiti 环境准备(检查项): JDK 1.7 ...

    mysql 严格模式 Strict Mode说明(转)

    转自https://www.cnblogs.com/jhcelue/p/7290243.html 1.开启与关闭Strict Mode方法 找到mysql安装文件夹下的my.cnf(windows系统 ...

    unity 脚本说明

    MonoBehavour void OnEnable(){ //OnEnable执行在Wake和之前 } void Awake(){ // } void Start(){ } void OnEnabl ...

    展开全文
  • 在jQuery中使用ajax传递数组时候貌似没有经过什么处理就能被后端接收到,最近在做Vue应用,使用axios向服务端传递数组的时候出现了格式不对的问题如下:'id[0]=123&id[1]=456'服务端期待的格式则是这样'a=123&...

    在jQuery中使用ajax传递数组时候貌似没有经过什么处理就能被后端接收到,最近在做Vue应用,使用axios向服务端传递数组的时候出现了格式不对的问题如下:

    'id[0]=123&id[1]=456'

    服务端期待的格式则是这样

    'a=123&a=456'

    因为后端接受到的参数不对,整个请求无法处理。查看axios文档,其中有一段介绍如下

    // `paramsSerializer` 是一个负责 `params` 序列化的函数

    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)

    paramsSerializer: function(params) {

    return Qs.stringify(params, {arrayFormat: 'brackets'})

    },

    尝试过后发现格式依然不对,因为文档中并没有对arryaFormat有哪些参数进行说明,试尽各种办法,突然想起这个参数序列化的实现本就是基于qs实现的,于是在qs中找到如下说明:

    使用qs进行字符串序列化默认格式如下:

    qs.stringify({ a: ['b', 'c', 'd'] });

    // 'a[0]=b&a[1]=c&a[2]=d'

    我们可以通过设置 indices 为false实现以下效果

    qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });

    // 'a=b&a=c&a=d'

    也可以使用arrayformat选项输出 指定数组的格式

    qs.stringify({ id: ['b', 'c'] }, { arrayFormat: 'indices' })

    // 'id[0]=b&id[1]=c'

    qs.stringify({ id: ['b', 'c'] }, { arrayFormat: 'brackets' })

    // 'id[]=b&id[]=c'

    qs.stringify({ id: ['b', 'c'] }, { arrayFormat: 'repeat' })

    // 'id=b&id=c'

    以上只是 qs.stringfy 在序列化字符串时的用法,更多qs功能可以参考 https://www.npmjs.com/package/qs

    展开全文
  • 深入响应式原理 — Vue.js​cn.vuejs.org简单来说,当我们把一个 JavaScript 对象传入 Vue 实例作为data选项时,Vue将遍历此对象所有的 property,使用Object.defineProperty把这些 property 全部转为getter/sette.....

    响应式是一种设计模式。

    页面响应式布局就是根据页面缩放大小调整布局,数据响应式就是代码根据数据变化作出反应

    深入响应式原理 — Vue.js​cn.vuejs.org
    61be9037e0d7dee129bf7bf12a90f851.png

    简单来说,当我们把一个 JavaScript 对象传入 Vue 实例作为data选项时,Vue将遍历此对象所有的 property,使用Object.defineProperty把这些 property 全部转为getter/setter,并将property记录为依赖。 Vue 追踪这些依赖,在其被访问和修改时通知变更。

    具体实现:

    每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

    10d6fe64fef19e142068279aa27e395b.png

    注意:

    由于 JavaScript 的限制,Vue不能检测数组和对象的变化。

    • 对象:Vue 无法检测 property 的添加或移除。
    var vm = new Vue({
      data:{
        a:1,
        someObject:{}
      }
    })
    
    // `vm.a` 是响应式的
    
    vm.b = 2
    // `vm.b` 是非响应式的

    我们无法动态添加根级别的响应式 property。但是可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。

    Vue.set(vm.someObject, 'b', 2)
    //或者
    vm.$set(vm.someObject,'b',2)// vm.$set 实例方法是全局 Vue.set 方法的别名
    • 数组:Vue 不能检测以下数组的变动:
      • 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
      • 当你修改数组的长度时,例如:vm.items.length = newLength
    var vm = new Vue({
      data: {
        items: ['a', 'b', 'c']
      }
    })
    vm.items[1] = 'x' // 不是响应性的,解决:vm.$set(vm.items, indexOfItem, newValue)
    vm.items.length = 2 // 不是响应性的,解决:vm.items.splice(newLength)
    展开全文
  • VUe-数组get传递

    千次阅读 2020-04-28 18:26:32
    vue中get方法如何传递数组参数 直接放在对象中传递数组 export function getCrApplicationList(data) { var test = ['111', '222'] return request({ url: '/applicant/CrApplication/List', method: 'get'...
  • vue数组到后台

    千次阅读 2020-02-25 11:38:47
    使用框架有resful,spring,vue 前台: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <...
  • VUE JSON数组,JSON对象,数组的区别

    千次阅读 2020-04-11 07:38:58
    在前端和后端进行数据传输的时候这种格式也是很受欢迎的,后端返回json格式的字符串,前台使用js中的JSON.parse()方法把JSON字符串解析为json对象,然后进行遍历,供前端使用。 javascript 对象表示语法的子集。 ...
  • 我想在 在前端 axios传递 shop_Request对象的数组 在springboot接收 list<shop_Request> 要怎么办呢 看了一上午网上的办法还是失败 绝望呀,可以写一下吗 ![图片说明]...
  • 最近一个练手vue项目,选择axios作为网络请求库。 后台一接口使用了数组作为参数。本以为没什么,实则遇到了一个大坑。 axios.post(url,{ ids: [1,2,3], type: 1 }).then((res) => { }) 总结一下正确的传数组...
  • 一、问题描述 1.通过qs.stringify() ...2.将数组先用JSON转一次,再加入对象,再用qs来转 结果: array [{"name":"a","id":1},{"name":"b","id":2},{"name":"c","id":3}] number 1 string STRING  
  • php传输数组给axios

    2019-07-03 23:59:22
    本篇文章需要后期更改,现在要考试 需要用到后端传输数组给前端,前端用的是vue,axios 需要先将php中数组转换成json,然后前端接收后可以直接使用[ ]接收了 ...
  • 一、JSON 语法规则: JSON 是存储和交换文本信息的语法 在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML、JSON等, ...另一种是数组对象 [{"name":"JSON","address":"北京市西城区
  • python ajax+flask前端传输数组到后端 做一个小记录: 前端: var ids = JSON.stringify(checkStatus.data); //checkStatus.data即为要传的数组 $.post({ url: '/multilinedel', //要传递过去的路由名称 data: ...
  • vue+springboot删除使用数组传输 后端扔过来一个接口参数需要用数组传输,好头疼,下面给一个自己使用的方法吧。 批量删除和单个删除都使用了这个接口。 1、前端代码 这里只粘贴出来使用到的代码。 <!--单个...
  • 主要介绍了浅谈vue中get请求解决传输数据是数组格式的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 前端获取复选框的数据准备用一个数组传回到后台,但后台就是接受不到。 原因分析: 前端查看参数,参数中变量名会多一个[],这是后台接不到的原因: 解决: 在ajax代码参数中增加traditional(防止深度序列化)并...
  • vue中使用post向后端发送数据,数据格式如下 {key: "test", description: "test", pages: Array(8)} description: "test" key: "test" pages: Array(8) 0: "Dashbord" 1: "Permission" 2: "PageUser" 3: ...
  • vue中axios解决get请求传输数据是数组格式问题 qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的...
  • vuex action:尤雨溪在知乎回答了,区分 actions 和 mutations 并不是为了解决竞态问题,vuex 真正限制你的...https://www.zhihu.com/question/48759748/answer/112823337vue事件绑定:vue的事件绑定,直接绑定给当...
  • 本实例使用@RequestPart注解同时接受...需要用到vue上传文件组件 el-upload,请自行引入。 vue端页面代码: <el-upload ref="upload" class="upload-demo" drag action="#" :auto-upload="false"> ...
  • Ajax传输Array数组

    千次阅读 2018-05-29 21:11:20
    最近考试太多,好久没写了,...我后端用的是SSM框架,前端是基于Vue 先看一下前端请求的代码(方便我描述问题): function submitData(){ var data={ // 开始的行数 start:vExcel.startRow, // 匹配数据 m...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,379
精华内容 2,151
关键字:

vue传输数组

vue 订阅