时间戳

首页 > 解决方案 > 如何在不修改 vue 3 中的道具的情况下使用道具初始化状​​态

javascript - 如何在不修改 vue 3 中的道具的情况下使用道具初始化状​​态

问题描述

我在我的 vue 3 组件中初始化状态如下：

data() {
    return {
        new_listing: this.listing //which is a prop
    }
}

但是，当我将它绑定到输入时，例如：

<input type="text" placeholder="title" v-model="new_listing.title" />

预期的结果只是new_listing.title改变，但道具listing似乎也在改变。我怎样才能做到只有 statenew_listing.title改变而不是 prop listing.title。

标签： javascriptvue.jsobjectvuejs3

解决方案

您需要克隆对象（制作新副本）。

在 javascript 中，当将对象分配给变量时，它不会创建该对象的新副本。相反，它通过引用原始对象来分配它。

因此，从您问题中的代码来看，doing会将对象{ new_listing: this.listing }的引用分配给. 这意味着修改也会修改：this.listingnew_listingnew_listingthis.listing

要在 ES6+ 中克隆对象，您可以执行以下操作。这...是一种扩展语法。在这种情况下，它是一种克隆对象的方法。

data() {
    return {
        new_listing: {...this.listing} //which is a prop
    }
}

如果您不使用 ES6，请查看在 JavaScript 中深度克隆对象的最有效方法是什么？看看如何克隆一个对象。

注意：如果对象包含对象（例如{a: {b: "h"}}，那么您将需要进行深度克隆（在对象中克隆对象）。

推荐阅读