Vue 使用$set动态给数据设置属性
在实际的开发过程中,给表单元素绑定model的时候,绑定的元素的属性是根据后台数据动态生成的。如果使用常规的赋值方式,是无法更新视图的
- 需要使用, this.$set(dataName,keyName,keyValue)
export default {
data:{
// 先定义一个空对象
formObject:{}
},
mounted() {
this.initPage()
},
methods:{
initPage(){
this.$store.dispatch(namespace/callData).then(res=>{
// 给数据设置key-value
res.data.forEach(item=>{
// this.formObject[item.name] = item.value // 这种方式是不能更新视图的
this.$set(this.formObject, item.name, item.value) // 可以更新视图
})
})
}
}
}
Vue 使用$set动态给数据设置属性的更多相关文章
- vue组件上动态添加和删除属性
1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...
- 【使用JSOUP实现网络爬虫】修改数据-设置属性的值
问题 在你解析一个Document之后可能想修改其中的某些属性值,然后再保存到磁盘或都输出到前台页面. 方法 可以使用属性设置方法 Element.attr(String key, String va ...
- Jquery chosen动态设置值 select Ajax动态载入数据 设置chosen和获取他们选中的值
在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态载入option和对option的选中.可是由于项目中使用了jquery里的chosen()方法.怎么也无法实现效果 ...
- Easyui设置动态表格,动态导出数据实例,附Demo
最近开发的过程中碰到一个客户提出的需求,一个指定的页面导出需要提供一个弹出页面选择列表页面需要显示的列,页面确认之后需要修改列表页面显示的表格,导出的数据也需要同步变化. 总结一下可以称为一个列表数据 ...
- [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)
一.设置属性的值: {{data中的数据}} window.onload = function () { var c = new Vue({ el : '#box', data : { url : ' ...
- Easyui设置动态表格,动态导出数据实例,附Dome
最近碰到一个需求,需要提供一个弹出页面选择列表页面需要显示的列,页面确认之后需要修改列表页面显示的表格,导出的数据也需要同步变化. 下面直接上代码 1.设置需要显示的列columus为全局对象,用于子 ...
- VUE 动态给对象增加属性,并触发视图更新。
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...
- 在Delphi中调用"数据链接属性"对话框设置ConnectionString
项目需要使用"数据链接属性"对话框来设置ConnectionString,查阅了一些资料,解决办法如下: 1.Delphi 在Delphi中比较简单,步骤如下: 方法1: use ...
- 046——VUE中组件之使用动态组件灵活设置页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Ethical Hacking - NETWORK PENETRATION TESTING(21)
MITM - Code Injection Inject javascript or HTML code into pages. Code gets executed on target machin ...
- Python 中的面向对象编程
面向对象编程(Object-oriented programming, OOP)是一种基于对象概念的编程范式,可包含属性(attribute)形式的数据以及方法(method)形式的代码.另一种对 O ...
- 17 个 Python 特别实用的操作技巧,记得收藏!
Python 是一门非常优美的语言,其简洁易用令人不得不感概人生苦短.在本文中,作者 Gautham Santhosh 带我们回顾了 17 个非常有用的 Python 技巧,例如查找.分割和合并列表等 ...
- CentOS 7配置网卡信息,并设置yum为阿里云的镜像源
一.问题场景 使用virtualbox创建的centos 7版本的linux虚拟机,使用ping mirrors.aliyun.com有返回,但是wget -O /etc/yum.repos.d/ep ...
- .Net、ASP.Net、C#、VisualStudio之间的关系是什么
.Net一般指的是.NetFramework,提供了基础的.Net类,这些类可以被任何一种.Net编程语言调 用,.NetFramework还提供了 CLR.JIT.GC等基础功能. ASP.Net是 ...
- DP学习记录Ⅰ
DP学习记录Ⅱ 前言 状态定义,转移方程,边界处理,这三部分想好了,就问题不大了.重点在状态定义,转移方程是基于状态定义的,边界处理是方便转移方程的开始的.因此最好先在纸上写出自己状态的意义,越详细越 ...
- jmeter接口测试 -- status==400(Bad Request)
一.接口请求信息 二.错误的jmeter接口请求 1.请求内容 2.响应内容 三.正确的接口请求 1.看回原本的接口请求信息,company_id = null .这里也就不能空 四.原因分析 1. ...
- git的核心命令使用和底层原理解析
文章目录: GIT体系概述 GIT 核心命令使用 GIT 底层原理 一.GIT体系概述 GIT 与 svn 主要区别: 存储方式不一样 使用方式不一样 管理模式不一样 1.存储方式区别 GIT把内容按 ...
- DFS与BFS——理解简单搜索(中文伪代码+例题)
新的方法和概念,常常比解决问题本身更重要. ————华罗庚 引子 深度优先搜索(Deep First Search) 广度优先搜索(Breath First Search) 当菜鸟们(比如我)初步接触 ...
- Pandas 复习
1.导包 import pandas as pd 2.数据读取,文件在该代码文件夹内 food_info = pd.read_csv('food_info.csv') 3.查看类型 food_info ...