当从后台直接调接口返回数据

直接将数组array赋值给定义的变量,会导致组件无法更改其它值,例如多选框,多选下拉框,会导致无法选中其它的值,也无法取消当前已赋值的选中项

data() {
return {
     infoForm:{
array: []
}
}
},
//调接口赋值
getApi(){
get().then(res=>{
//返回的数据,info里面包含array字段
this.infoForm = res.info
})
}

以上代码将会出现问题,页面加载的时候我们已经对infoform里面的array初始化一次了,数组结构已定义,后面直接将数组改变,导致组件无法读取

改变方式

data() {
return {
     infoForm:{
array: []
}
}
},
//调接口赋值
getApi(){
get().then(res=>{
//定义变量
let info = res.info
//初始化数组
info.array = []
//将info拷贝到infoForm
this.infoForm = Object.assign({},this.info)
//将array的值加入infoForm的array
info.array.forEach(item =>{
_this.infoForm.array.push(
item
)
})
})
}

vue对组件以数组方式赋值的问题的更多相关文章

  1. vue封装组件的正确方式-封装类似elementui的组件

    最近读了下element的源码,仿照他封装了两种不同的组件. 第一种:通过组件来调用显示的 <template> <!--src/component/custom/main.vue- ...

  2. vue父组件为子组件传值传不过去?vue为数组传值,不能直接用等于的方式,要用循环加push的方式

    父组件为子组件传值不成功,子组件拿不到值,不能直接赋值,要用循环加push的方式赋值.

  3. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  4. vue动态子组件的实现方式

    让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <d ...

  5. route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

  6. Vue自定义组件以及组件通信的几种方式

    本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...

  7. vue父子组件状态同步的最佳方式续章(v-model篇)

    大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...

  8. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  9. Vue 创建组件的方式

    Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015   版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...

随机推荐

  1. oracle--二维表的操作创建修改删除

    oracle学习内容 oracle的管理系统学习 oracle的数据管理学习 oracle的用户管理 oracle二维表管理 创建表和字段讲解 --创建表学习 1. 创建表的基本语句:create t ...

  2. Sentinel整合Dubbo限流实战(分布式限流)

    之前我们了解了 Sentinel 集成 SpringBoot实现限流,也探讨了Sentinel的限流基本原理,那么接下去我们来学习一下Sentinel整合Dubbo及 Nacos 实现动态数据源的限流 ...

  3. [2019杭电多校第六场][hdu6635]Nonsense Time

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6635 题意是说一开始所有数都冻结,第i秒会解冻第ki个数,求每秒状态下的最长上上升子序列长度. 这种题 ...

  4. uWSGI、uwsgi、WSGI、之间的关系,为什么要用nginx加uWSGI部署。

    WSGI 协议 WSGI:是一种协议规范,起到规范参数的作用,就像告诉公路一样,规定超车靠右行,速度不低于90km/h,等.但这一切都是对双方进行沟通,比如,重庆到武汉这条高速路,这儿重庆和武汉就各为 ...

  5. poj1305 Fermat vs. Pythagoras(勾股数)

    题目传送门 题意: 设不定方程:x^2+y^2=z^2若正整数三元组(x,y,z)满足上述方程,则称为毕达哥拉斯三元组.若gcd(x,y,z)=1,则称为本原的毕达哥拉斯三元组. 定理:正整数x,y, ...

  6. C#传特定的值,获得特定的数组排序

    一,在实际业务中,我们会有当我们传任何值进来时,我们要有特定的排序,,比如传进来的是"生物", "历史","化学", 但实际上我们需要的是& ...

  7. sql 时间函数大全

    1.        当前系统日期.时间    select getdate() 2. dateadd  在向指定日期加上一段时间的基础上,返回新的 datetime 值  例如:向日期加上2天  se ...

  8. js中的函数声明置顶

    函数声明置顶是指 js引擎在读取变量与声明式函数时,会优先读取,例如如下 var a = 1: function a(){}; console.log(a); //这里得到的为1,而不是该functi ...

  9. Solr的学习使用之(七)Solr高级查询facet、facet.pivot简介

    以下转载自:http://hongweiyi.com/2013/03/apache-solr-facet-introduction/ 1.什么是Faceted Search Facet['fæsɪt] ...

  10. windows下laravel 快速安装

    1. 安装composer  https://getcomposer.org/ 2. 安装git windows 客户端工具 https://git-scm.com/downloads 3. 更改co ...