对VUE中的对象添加属性

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

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对象,这样下拉框就会自动定位显示原先的选项值,期望达到的效果如下

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

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

捣鼓了很久,测试发现通过定义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方法,通过以下方法解决了设置对象属性的问题

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中的对象添加属性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue给对象动态添加属性和值的实例

    一.背景 介绍:在vue中请求接口中,一个请求方法可能对应后台两个请求接口,所以请求参数就会有所不同.需要我们先设置共同的参数,然后根据条件动态添加参数属性. 二.案例 let that = this; let params = { "type":that.addQueTable.type, "discussTitle":that.addQueTable.discussTitle, }; // 区分普通题库还是模考题库 let addQuestionApi = ''

  • vue将对象新增的属性添加到检测序列的方法

    vue中将对象中新增的属性增加到检测序列中 deepCopy(o1, o2) { // 将o2的内容拷贝给data中的o1 var key, i if (o2 instanceof Array) { for (i = 0; i < o2.length; i++) { if (o2[i] instanceof Array) { this.$set(o1, i, []) this.deepCopy(o1[i], o2[i]) } else if (o2[i] instanceof Object) {

  • 对VUE中的对象添加属性

    背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minDa

  • 详解Vue中watch对象内属性的方法

    vue提供了watch方法,用于监听实例内data数据的变化.通常写法是: new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } }) 上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内

  • vue中向data添加新属性的三种方式小结

    目录 向data添加新属性的三种方式 原理分析 三种方式 vue组件 data等属性介绍 向data添加新属性的三种方式 原理分析 首先在了解这三种方式之前,我觉的有必要说一下,为啥不能直接手动给data中的对象添加属性呢? 下面咱们一块分析下: vue2 是通过数据劫持 “Object.defineProperty” 实现数据响应式:     const obj = {};         let val = 'kk'         Object.defineProperty(obj,'na

  • vue对象添加属性(key:value)、显示和删除属性方式

    目录 对象添加属性(key:value).显示和删除属性 效果图 添加属性 删除属性 不能检测到对象属性的添加或删除问题 有三种解决方案 对象添加属性(key:value).显示和删除属性 效果图 <FormItem label="输入项填充内容 :" prop="value" :rules="name1" style="margin-top: 20px"> <Button type="succes

  • vue给对象添加属性没有响应式的问题及解决

    目录 vue给对象添加属性没有响应式 给已创建的vue添加响应式属性 怎么才能添加响应式的属性呢? 总结 vue给对象添加属性没有响应式 vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法. 但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题. 在vue中可以使用this.$set(对象名,'属性名',属性值)的方法去给对象添加

  • vue中渲染对象中属性时显示未定义的解决

    后端给的对象结构是这样的,三层嵌套 而在最开始的时候我在data中定义了一个对象(dataInfo)接受了图示所有的属性 而在template中我要渲染数据(dataInfo.clientInfo.deviceName) 然后....在这里插入图片描述 未定义...作为一个前端菜鸡,百思不得其解. 最终在有道的帮助下,告诉我了此属性不在vue实例上 恍然大悟 只能解析在data中定义也就是vue实例上的对象子一层的东西,对于孙一层的东西就被解析成不在vue实例上的 两种解决方法: 第一: 在定义

  • js基础之DOM中元素对象的属性方法详解

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

  • 详细聊聊vue中组件的props属性

    目录 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看 问题二:那如果我们想给年龄加1岁,怎么实现? 问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型? 问题四:可以限制类型,那是不是也可以限制是否必传呢? 问题五:props接收的属性值可以修改吗? 问题六:必须要修改props属性值,怎么办? 总结:配置项props 总结 今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配

  • JavaScript中Boolean对象的属性解析

    constructor 属性 实例 返回通过 myvar 对象的原型创建的函数: var myvar = new Boolean(1); myvar.constructor; 结果输出: function Boolean() { [native code] } 定义和用法 constructor 属性返回对创建此对象的 Boolean 函数的引用. prototype 构造器 为 Boolean 对象创建一个新的方法: Boolean.prototype.myColor=function() {

  • JS动态给对象添加属性和值的实现方法

    如下所示: var obj={}; for(var i=0;i<10;i++){ eval("obj.p"+i+"="+i); } 以上就是小编为大家带来的JS动态给对象添加属性和值的实现方法全部内容了,希望大家多多支持我们~

随机推荐