为什么我不能推入Vue阵列并使其工作？

Question

因此，我遇到了Vue 2的一个奇怪问题。我已经使用了几个月了，并喜欢它。但这会使我的头发变白。这与我在许多其他页面和子组件中学习并使用的操作方式相同，没有问题。我可能离它太近，看不到简单的东西。希望。

为了使之尽可能简单，这是我的组件：

这是专页的Vue

data: {
  openOrders: DataSets.CardTests
},
computed: {
  myOrders() {
    return this.openOrders.filter(x => {
      return ((x.FellowName !== undefined) && (x.FellowName.First === 'Sandra') && (x.FellowName.Last === 'Someone'));
    });
  },
  othersOrders() {
    return this.openOrders.filter(x => {
      return ((x.FellowName !== undefined) && ((x.FellowName.First + ' ' + x.FellowName.Last) !== 'Sandra Someone'));
    });
  },
  unassignedOrders() {
    return this.openOrders.filter(x => {
      return (x.FellowName === undefined);
    });
  },
},
mounted() {
  // Doing nothing here
}

上面的“应该” order-set用计算出的值填充我的自定义组件myOrders：

<order-set ref="MyOrders"
           role-type="functional"
           title="My Work Queue"
           v-bind:is-multi-column="false"
           v-bind:is-collapsable="true"
           v-bind:can-view="true"
           v-bind:allow-view-swap="true"
           v-bind:as-table="false"
           v-bind:orders="myOrders">
</order-set>

有两个其他实例order-set为othersOrders和unassignedOrders。

的DataSets.CardTests是像以下的数组：

CardTests: [{
  Id: 104,
  PatientName: {
    First: 'Richard',
    Middle: '',
    Last: 'Priebe'
  },
  DefaultMrn: {
    Type: 'CCF Main',
    Number: '123133',
    IsDefault: true
  },
  PatientDob: '2000-12-28T00:00:00',
  OrderDateTime: '2018-02-01T06:00:00-04:00',
  NursingUnit: 'M50',
  Site: 'CCF Main Campus',
  Bed: '18',
  TechnologistName: {
    First: 'Tim',
    Middle: null,
    Last: 'Fellows'
  },
  TestTypeCode: 'PORT',
  TestTypeDescription: 'Portable EEG'
}]

当然，现在只是垃圾测试数据，但最终将来自数据库。

以上所有效果都完美呈现，一切都很棒！

第二个我开始使其变得更“真实”，在页面加载后收集数据，如下所示：

data: {
  openOrders: []
},
mounted() {
  for (let o in DataSets.CardTests) {
    this.openOrders.push(DataSets.CardTests[o]);
  }
}

我的子order-set组件没有任何显示。

然而，在Chrome中Vue公司的开发人员工具，我看到openOrders有10条记录和myOrders，othersOrders并unassignedOrders分别有3个，2个和5个记录。更不用说我order-set组件的3个实例也orders具有正确的数据集。 但是，组件上的内部数据元素（values在这种情况下）order-set没有元素。

OrderSet组件

props: {
  orders: { type: Array, required: true, default() { return [] } }
},
data() {
  return {
    values: this.orders
  };
},

据我了解，如果您有一个prop可以突变的变量，则应将其复制到data数组中以使其“可响应”。

更新 - order-set组件的简单部分不起作用/不显示总记录：

<div class="order-set">
  <div class="mb-2">
    <div class="card-header">
      <div class="d-flex justify-content-between">
        <h3><span class="highlight">{{ values.length }}</span> {{ title }}</h3>
      </div>
    </div>
  </div>
</div>

那我想念什么呢？我什至尝试this.$nextTick和setTimeout测试，看看这是否是时间安排，但无济于事。

请帮忙！

Answer 1

我认为问题是道具更改时组件values的数据OrderSet不起作用orders。让我们尝试使用计算而不是数据

props: {
  orders: { type: Array, required: true, default() { return [] } }
},
computed: {
  values () {
    return this.orders
  };
},

更新：为什么在这种情况下数据的属性不起作用

定义组件时，必须将数据声明为返回初始数据对象的函数，因为将使用相同的定义创建许多实例。如果我们使用普通对象存储数据，则该对象将在创建的所有实例之间通过引用共享！通过提供数据功能，每次创建新实例时，我们都可以调用它以返回初始数据的新副本。

如果需要，可以通过将vm。$ data通过JSON.parse（JSON.stringify（...））传递来获得原始对象的深层克隆。

因此，values在这种情况下，将从中克隆openOrders，从而导致上的更改openOrders不会影响。values

参考：https：//vuejs.org/v2/api/#data