如何在“Vue3 Option API”中创建一个新对象，而不是将引用赋给现有对象

e7arh2l6 于 2023-03-13 发布在 Vue.js

关注(0)|答案(3)|浏览(199)

props:{
    variants:{
        type: Array,
        default: []
    }
    options:{
        type: Array,
        default: []
    },
},
data(){
    return{
        item:{
            quantity: 1,
            options: this.options,
        },
    }
},

我有一个问题与此代码：当我改变item.options的值时，options也会改变，因为据我所知，我只是给options分配了一个引用。
如何为item.options创建新对象，而不是为Vue3 Option Api中的现有对象分配引用。
我试过{...this.options}，但是没有用。

vue.js

来源：https://stackoverflow.com/questions/75674739/how-to-create-a-new-object-instead-of-assigning-a-reference-to-the-existing-obje

3条答案

按热度按时间

ovfsdjhp1#

如果是一个基元数组，浅层克隆就足以达到预期的结果：

item:{
    quantity: 1,
    options: [...this.options],
}

否则，您将需要执行深度克隆，有多种方法可以实现它，您可以搜索它，但不建议使用JSON.parse(JSON.stringify({}))。

赞(0）回复(0）举报 2023-03-13

yebdmbv42#

应使用数组[]括号，而不是对象括号{}

options: [...this.options]

x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-03-13

c2e8gylq3#

您可以使用Object.assign()：

data(){
    return{
        item:{
            quantity: 1,
            options: Object.assign({}, this.options),
        },
    }
},

为了更好的可读性，我会将 prop 的名称改为optionsProp！

赞(0）回复(0）举报 2023-03-13

我来回答

如何在“Vue3 Option API”中创建一个新对象，而不是将引用赋给现有对象

3条答案

相关问题

热门标签

最新问答