在vue.js在不更改父数据的情况下编辑props 的正确方法是什么?

在vue里有什么办法吗.js在子对象中创建传递属性的本地副本?

我在谷歌上搜索了这个,但到处都有这样的报道,我们可以通过这样做来实现这一点.

 props:["user"],
  data(){
    return {
      localUser: Object.assign({}, this.user)
    }
  }

在这里,用户被传递了一个对象,我正在本地用户中创建它的副本,但它根本不起作用,本地用户是未定义的.

您是否遇到过这样的情况:必须在不影响父组件状态的情况下更改子组件中的父属性,即在子组件中创建自己的副本,然后对其进行编辑?

任何关于这方面的见解都会有所帮助.

我也在某个地方读到过vue@2.3.3,当我们想要将props 从父组件传递到子组件时,我们需要手动创建一个本地数据来保存props ,这会产生很多无用的工作.

我们可以像这样创建本地数据:

props: ['initialCounter'],
data: function () {
    return { counter: this.initialCounter }
}

但这在我的情况下也不起作用.

这是我的代码.

在我的应用程序中,我有一个列表视图.

enter image description here

当用户点击See Focused View按钮时,用户被重定向到下面提到的视图,即实际上是一个 bootstrap 模式视图.

enter image description here

在这里,用户可以编辑Name的值,但由于我将Name作为属性从一个ent组件传递到这里,所以在这里编辑它会导致它在父组件上更新,也就是在列表视图中.

推荐答案

fiddle中,子组件使用Object.assign()创建data的副本,data是一个对象array.然而,这只会创建一个shallow copy,因此数组元素仍然会引用原始实例,从而导致您看到的行为.

深度复制数组的几种解决方案:

  • 使用JSON.parse(JSON.stringify(this.data)),这对primitive个对象属性(StringNumberBigIntBooleanundefinednull)相当有效:

    data() {
      return {
        local_data: JSON.parse(JSON.stringify(this.data))
      }
    }
    

    (demo 1)

  • 将对象映射到新对象中,如果深度仅为1(嵌套数组/对象仍将被浅复制),则效果良好:

    data() {
      return {
        local_data: this.data.map(x => ({...x}))
      }
    }
    

    (demo 2)

  • 使用实用程序库,例如lodash's cloneDeep:

    data() {
      return {
        local_data: _.cloneDeep(this.data)
      }
    }
    

    (demo 3)

Vue.js相关问答推荐

Visual Studio代码中的VUE/VLAR扩展不断崩溃:JS/TS语言服务立即崩溃5次…

VUE:带自定义组件的数组输入绑定

视图中的 vue 样式不适用于 html

是否可以使用 Vuetify/VueJS 为轮播设置默认图像而不是第一个图像?

Vue:在表格中显示嵌套数据

Vue index.html favicon 问题

如何将 vue.js 与 gulp 一起使用?

Vue.js 如果在视图中

Amazon EC2 错误:监听 EACCES 0.0.0.0:80

如何在 Vue 3 中使用 SSR

Angular 5 中的 功能

Vue-test-utils:在单个测试中多次使用 $nextTick

ionic - `slot` 属性已被弃用 - eslint-plugin-vue

Laravel 中的 VueJS 组件实现中的鼠标悬停

触发子函数

使用 Vue.js & DataTable(jquery 插件)

vue-router如何持久化导航栏?

VS Code - 在 .vue 文件中启用 autoClosingTags 选项

VueJS 2 + ASP.NET MVC 5

用于身份验证标头的 vue-resource 拦截器