对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 相关文章推荐
iframe实用操作锦集
Apr 22 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
微信小程序适配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处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
python获取从命令行输入数字的方法
2015/04/29 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python全局变量引用与修改过程解析
2020/01/07 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
会计与审计专业自荐信范文
2014/03/15 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
铅球加油稿100字
2014/09/26 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
个人求职意向书
2015/05/11 职场文书
观后感格式
2015/06/19 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
如何利用python实现Simhash算法
2022/06/28 Python