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 ...
随机推荐
- 最新版 Mysql 8.0.16 创建用户权限更新回收权限
1.创建用户语法 : create user ‘写你自己的用户名’@‘写你需要哪个IP连接你的用户(%表示所有)’ identified by ‘密码’; 案例: create user ‘wangx ...
- java_第一年_JavaWeb(12)
SimpleTag标签 定义了五个方法:setJspContext.setJspBody.setParent和getParent以及最重要的doTag方法(完成了所有的业务逻辑): setJspCon ...
- Django之模板(T)
一, 常用语法 Django模板中只需要记两种特殊符号: {{ }}和 {% %} {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作. 一, 变量 语法: {{ 变量名 }} ...
- python的cls,self,classmethod,staticmethod
python类里会出现这三个单词,self和cls都可以用别的单词代替,类的方法有三种, 一是通过def定义的 普通的一般的,需要至少传递一个参数,一般用self,这样的方法必须通过一个类的实例去访问 ...
- Unity3D 优化
用UNITY开发手机游戏,背景图片和UI图片显示的比PC机上模糊非常多,怎么解决??在unity里选中资源 1.TextureType 改成 Advanced2.NonPower of 2 改成 no ...
- sobel算法的Soc FPGA实现之框架分析(二)
重点分析一.AXI_VDMA_1 之前一直认为这个就是内含有DDR的ip核(......最近才搞懂是个啥),后来经过对FDMA的分析发现这就是个框架,通AXI总线挂载到bus总线,可以实现PL端FPG ...
- web前端工程化
目标 1.能够了解模块化的相关规范 2.了解webpack 3.了解使用Vue单文件组件 4.能够搭建Vue脚手架 5.掌握Element-UI的使用 1.模块化的分类 A.浏览器端的模块化 1).A ...
- linux查看 inotify 提供的工具
[root@rsync-client-inotify ~]# ll /usr/local/bin/inotify* -rwxr-xr-x. 1 root root 38582 Jun 3 22:23 ...
- hdu4348 To the moon (可持久化线段树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4348 题目大意:给定含有n个数的序列,有以下四种操作 1.C l r d:表示对区间[l,r]中的数加 ...
- python3 使用 django-xadmin 遇到的许多坑
几乎所有公司项目都是python2的, xadmin对Python2 很友好,对Python3 很不友好, 所以在Python3 环境下使用xadmin遇到了许多意想不到的坑,在这里记录并分享一下: ...