时间戳

首页 > 解决方案 > 修改数据时正在修改道具？

javascript - 修改数据时正在修改道具？

问题描述

请看下面的 vue/nuxt 组件示例：

<template>
    <my-component v-model="selected" :options="options" />
</template>

<script>
export default {
    props: {
        currentSelected: Array,
        options: Array
    },
    data() {
        return {
            selected: this.currentSelected
        }
    }
}
</script>

当my-component 更新'selected'时，prop 也正在更新，并且正在更新父组件中的数据。

这是正常行为吗？如果是（或不是），为什么会发生这种情况？

标签： javascriptvue.jsnuxt.js

解决方案

这是正常行为。在 Javascript 中，您可以将对象和数组视为引用。

这意味着如果您编写以下代码：

let obj = { foo: 'bar' }
let other = obj
other.foo = 'meh'

那么，obj.foo将等于'meh'。

如果要将数组克隆到组件中并避免这种行为，则需要将数组中的所有值复制到 props.xml 中。为此，您可以使用以下内容：

export default {
    props: {
        currentSelected: Array,
        options: Array
    },
    data() {
        return {
            selected: JSON.parse(JSON.stringify(this.currentSelected))
        }
    }
}

这将允许您选择的变量丢失对您的 currentSelected 道具的所有引用。

推荐阅读