VUE动态追加对象的属性及属性值

这两在做组件的封装，在拆分组件时，遇到一个问题：给对象动态追加属性及对应的属性值，遇到的几种情况。
情况1：给对象追加明确的属性和属性值
昨天是在GET请求前，给请求的参数data对象动态设置属性，代码如下：

<template>
    <div class="list">
        显示对象testObj：{{testObj}}
    </div>
</template>
<script>  
export default {
    name:'list',
    data(){
        return{    testObj:{}  }
    },
    created(){ this.changObj1("name","hao"); },
    mounted(){},
    methods: {
        // 传参数形式给对象追加属性name，值为hao
        changObj1:function(key,val){
            this.testObj[key]=val;
            this.testObj.key=val;
        }
    }
}
</script>

输出结果为：
显示对象testObj：{ “name”: “hao”, “key”: “hao” }
按预期的输出，没有问题。

情况二：for循环动态追加属性和属性值变量
for循环动态追加，发现循环时，this.testObj.keyName方法只追加到数组的最后一个属性及属性值，代码如下：

methods: {
        // 变量形式给对象testObj追加属性及属性值
        changObj1:function(){
            let keyName='';
            for(let i=0;i<5;i++){
                //对象属性名称为key1到key9
                keyName="key"+i;
                //keyName为属性名称，i为属性值
                
                this.testObj.keyName=i;  
                //输出结果：{ "keyName": 4 }
                
                this.testObj[keyName]=i;  
                //输出结果：{ "key0": 0, "key1": 1, "key2": 2, "key3": 3, "key4": 4 }
            }
        }
}

从输出结果，我们能看到，点属性赋值的方式不对，应该采用：this.对象名称【属性名称】=属性值

情况三：GET/POST请求后，动态追加属性和属性值
但是，今天我在GET请求成功后，将请求到的数组追加给对象使用同样的方式，使用了“this.对象名称【属性名称】=属性值”方式，发现结果输出为underfined，百度了一下，发现原因：在该数据发生更新时，vue无法检测到数据变化。这就说明以上两种方式都不对，更换代码：

    methods: {
        // 变量形式给对象testObj追加属性及属性值
        changObj1:function(){
            let keyName='';
            for(let i=0;i<5;i++){
                //对象属性名称为key1到key9
                keyName="key"+i;
                this.$set(this.testObj,keyName,i);  
            }
        }
   }

显示对象testObj：{ “key0”: 0, “key1”: 1, “key2”: 2, “key3”: 3, “key4”: 4 }

this.$set(对象名称，属性，属性值)

希望结果能帮到VUE的新手，同时，也希望前端大牛能详细说明一下原因~

最后

以上就是心灵美小白菜为你收集整理的VUE动态追加对象的属性及属性值的全部内容，希望文章能够帮你解决VUE动态追加对象的属性及属性值所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。