对VUE中的对象添加属性


Posted in Javascript onSeptember 18, 2018

背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性

data中定义的数据集对象mindData格式示例如下

mindData: [
{label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'},
{label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'},
{label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}]

1) 通过post调用接口获取minData对象,遍历添加属性value和content(方便后续通过v-model设置绑定radio控件的选择结果值value)

this.$http.post('XXXXXXXXXXXXXXXXXXXXXXXX', {
parms:'xxx'
}).then(res => {
letsel= this
sel.mindData= res.data
for(letitemofsel.mindData) {
item.value= ''
item.content=''
}
})

2) 这里我自定义了radio控件,部分代码如下

<mt-cell:title="label"class="zm-radio mint-field">
<input:placeholder="placeholder"
type="text"
:readonly="!editable"
style="margin-right: 14px;"
v-model="currentContent"
@click="onHandleClick"
class="mint-field-core"/>
<spanclass="mintui mintui-back reset" @click="popupVisible=true"></span>
<mt-popupclass="zm-radio-popup"
position="bottom"
v-model="popupVisible"
popup-transition="popup-fade"
:style="{height:popupHeight}"
ref="pop">
<zm-container>
<zm-mainref="zmRadioMain">
<div@click="popupVisible=false">
<mt-radiostyle="width: 100%"
:title="label"
align="right"
v-model="currentValue"
:options="options">
</mt-radio>
</div>
</zm-main>
</zm-container>
</mt-popup>
</mt-cell>

export default{
watch: {
popupVisible() {
this.options= this.dictItems
this.currentValue= this.value
letheight= this.options.length * 48
letmaxHeight= window.innerHeight * 0.5
if(height> maxHeight) {
this.popupHeight= maxHeight+ 'px'
letscrollHeight= maxHeight* maxHeight/ height
this.$refs.zmRadioMain.setScroll(scrollHeight,window.innerWidth)
}
},
currentValue() {
console.log('radio_currentValue:'+ this.currentValue)
this.$emit('input',this.currentValue)
letcontent= this.content
letlabel= ''
for(letitemof this.options) {
if(_.isEqual(item.value,this.currentValue)) {
label= item.label
break
}
}
this.currentContent= content
}

3) 绑定到自定义的radio控件上

<zm-radiolabel="单选:"
:editable="false"
:dict-data="mindData"
:content.sync="data.content"
v-model="data.value"></zm-radio>

赋值的关键代码如下

watch: {
popupVisible() {
this.options= this.dictItems
this.currentValue= this.value

弹出选项框列表的时候,会把当前文本上的value值赋值给currentValue对象,这样下拉框就会自动定位显示原先的选项值,期望达到的效果如下

对VUE中的对象添加属性

乍看之下,没什么问题,运行后发现

对VUE中的对象添加属性

点击下拉框,弹出选项列表,怎么数据没有通过v-model绑定上去,并且radio的value和lable值一直是空

对VUE中的对象添加属性

捣鼓了很久,测试发现通过定义mindRadio对象的方式绑定在zm-radio对象上,显示效果是能获得期望结果,那问题很明显,对象属性的创建有问题

<zm-radiolabel="单选:"
:editable="false"
:dict-data="mindData"
:content.sync="mindRadio.content"
v-model="mindRadio.value"></zm-radio>

data() {
return{
mindRadio: {
code:'',
value:''
}
}

经过vue官方资料查询,提供了vue.set方法,通过以下方法解决了设置对象属性的问题

对VUE中的对象添加属性

this.$http.post('XXXXXXXXXXXXXXXXXXXXXXXX', {
parms:'xxx'
}).then(res => {
letsel= this
sel.mindData= res.data
for(letitemofsel.mindData) {
sel.$set(item,'value','')
sel.$set(item,'content','')
}
})

总结原因:其实问题是vue实例对象不允许直接添加属性或删除属性,需要通过set方式更新数据对象。

另一种实现方式,可以采用先给临时对象tempData添加属性,再赋值给mindData

以上这篇对VUE中的对象添加属性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript隐藏控件的方法
Sep 21 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 #Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 #Javascript
解决vue attr取不到属性值的问题
Sep 18 #Javascript
vue动画打包后失效问题的解决方法
Sep 18 #Javascript
vue自定义全局共用函数详解
Sep 18 #Javascript
vue-自定义组件传值的实例讲解
Sep 18 #Javascript
vuex actions传递多参数的处理方法
Sep 18 #Javascript
You might like
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python中的__slots__使用示例
2015/02/26 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
新闻发布会主持词
2014/03/28 职场文书
毕业生面试求职信
2014/06/23 职场文书
化工实习心得体会
2014/09/09 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
无罪辩护词范文
2015/05/21 职场文书
董事会决议范本
2015/07/01 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android