小编Maj*_*raq的帖子

Javascript对象的深层副本无法在Vue.js中正常工作

我使用将对象的克隆从父组件传递到子组件props,但是当我更改status父组件的对象中属性的值时,子组件会收到通知,并status在“ ”对象。

我已经读过Object.assign()方法,它仅进行浅表复制,但奇怪的是我的对象属性是原始类型String,这意味着它们应该按值复制,而不是按引用复制,我什至尝试手动分配值并尝试JSON方式如下所示,但没有任何预期的效果。

父组件: AppServers

<template>
  <div>
    <AppServerStatus v-for="server in servers"   :serverObj="JSON.parse(JSON.stringify(server))">
    </AppServerStatus>
    <hr>
    <button @click="changeStatus()">Change server 2</button>
  </div>
</template>

<script>
  import AppServerStatus from './AppServerStatus';

  export default {
    name: "AppServers",
    components: {
      AppServerStatus
    },
    data() {
      return {
        servers: [
          {
            name: 'server1',
            status: 'Critical'
          },
          {
            name: 'server2',
            status: 'Normal'
          },
          {
            name: 'server3',
            status: 'abnormal'
          },
          {
            name: 'server4',
            status: 'idle'
          },
          {
            name: 'server5',
            status: 'Good'
          }, …
Run Code Online (Sandbox Code Playgroud)

javascript deep-copy vue.js

5
推荐指数
1
解决办法
91
查看次数

标签 统计

deep-copy ×1

javascript ×1

vue.js ×1