vue对组件以数组方式赋值的问题
当从后台直接调接口返回数据
直接将数组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对组件以数组方式赋值的问题的更多相关文章
- vue封装组件的正确方式-封装类似elementui的组件
最近读了下element的源码,仿照他封装了两种不同的组件. 第一种:通过组件来调用显示的 <template> <!--src/component/custom/main.vue- ...
- vue父组件为子组件传值传不过去?vue为数组传值,不能直接用等于的方式,要用循环加push的方式
父组件为子组件传值不成功,子组件拿不到值,不能直接赋值,要用循环加push的方式赋值.
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- vue动态子组件的实现方式
让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <d ...
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- Vue自定义组件以及组件通信的几种方式
本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...
- vue父子组件状态同步的最佳方式续章(v-model篇)
大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- Vue 创建组件的方式
Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015 版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...
随机推荐
- Log4net使用(二)
转:http://www.cnblogs.com/basilwang/archive/2006/06/09/421868.html Log4net同时按照日期和大小生成RollingFile和访问Sy ...
- [Web 前端] 003 html 表单标签
目录 表单标签 1. form 标签 2. 表单控件 2.1 登录框 2.2 单选按钮 2.3 多选按钮 3. select 标签 4 文件上传 5. textarea 标签 6. 按钮 7. 隐藏域 ...
- JVM-堆内存
1. java堆内存介绍 java的堆内存可以类比于计算机的内存,是存储整个机器数据的地方. (1)jvm一起动就创建java堆.类比计算机一起动就加载内存. (2)所有的线程共享.类比计算机所有进程 ...
- java 继承extends 的相关知识点
java只有单继承,不能多继承 子类只能继承父类的非私有成员(成员变量.成员方法) 子类不能继承父类的构造方法,但是可以通过super关键字访问父类的构造方法 继承 要体现子类父类的 继承关系, ”i ...
- Django中orm的惰性机制
那么首先要知道什么是ORM 专业化的角度来说:叫对象关系映射(Object-Relation Mapping)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 那具体ORM是什么呢?:( ...
- 搜索---BFS
搜索 深度优先搜索和广度优先搜索广泛的应用于树和图中,但是他们的应用远不止于此. BFS 广度优先搜索一层一层地进行遍历,每层遍历都是以上一层遍历的结果作为起点,遍历一个距离能访问到的所有节点 ...
- 多个nginx之间如何实现反向代理和负责均衡
1)nginx反向代理: http { upstream routeadmin { ip_hash; server 127.0.0.1:9201 weight= ...
- C++基础之static(静态)变量
static 表示静态 作用: 1.在函数体内,静态变量的值维持不变(记忆功能) 2.是一个本地的全局函数,即只能被本模块的函数访问(隐藏功能) static变量: static全局变量和普通 ...
- popen, pclose - process I/O
SYNOPSIS #include <stdio.h> FILE *popen(const char *command, const char *type); int pclose(FIL ...
- 构建LNMP+memcached服务
通过PHP页面实现对memcached服务器的数据操作,实现以下目标: - 为PHP安装memcache扩展 - 创建PHP页面,并编写PHP代码,实现对memcached的数据操作 环境:部署LNM ...