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
  };
},

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

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

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

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

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

Answer 2

在查看代码后，我相信您应该在已创建的函数内部而不是在安装函数中调用push。

created: function() {
  for (let o in DataSets.CardTests) {
    this.openOrders.push(DataSets.CardTests[o]);
  }
}

这里的逻辑是它的执行方式。
1.创建
2.计算
3.已安装

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

2 个答案: