颜色配值

如何给一个数组对象添加一个固定的key值
this.arrData[i]['newkey'] = '内容';
要加引号哈 不要加点 .

最后别忘记进行赋值哈
this.lastArr = this.arrData;

这里之所以会在进行一次赋值
是因为使用原始的数组
渲染不上去哈
至于为什么 我也不是特别清楚

<template>
    <div>
        <div class="demo" v-for="(item,index) in lastArr" :key="index">
            <div :style="{background:item.bg1}">顶部</div>
            <div :style="{background:item.conbg}">内容</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 配置red必须配置green 依次内推
            peiduiarr: [
                { bg1: "red", bg2: "green" },
                { bg1: "pink", bg2: "red" },
                { bg1: "#ccc", bg2: "#a2a2a1" },
                { bg1: "#cfc2c3", bg2: "#dadada" }
            ],
            // 后端返回来的数据
            arrData: [
                { bg1: "red" },
                { bg1: "#cfc2c3" },
                { bg1: "#ccc" },
                { bg1: "pink" },

                { bg1: "red" },
                { bg1: "#cfc2c3" },
                { bg1: "#ccc" },
                { bg1: "pink" },
            ],
            lastArr: []
        }
    },
    mounted() {
        for (let i in this.arrData) { //第一次循环后端数据
            for (let k in this.peiduiarr) {//第二次数 配置项数据
                if (this.peiduiarr[k].bg1 == this.arrData[i].bg1) {
                    //给数组对象添加一个新增key值，表示内容颜色
                    this.arrData[i]['conbg'] = this.peiduiarr[k].bg2;
                }
            }
        }
        window.console.log(this.arrData)
        this.lastArr = this.arrData;
    }
}
</script>

<style lang="scss" scoped>
.demo {
    border: 1px solid red;
    margin-bottom: 20px;
    width: 200px;
}
</style>

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：晚来南风晚相识

如果文中有什么错误，欢迎指出。以免更多的人被误导。