为什么我不能启动Vue阵列并让它工作呢?

为了尽可能简单,下面是我的组件:

这是页面的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
}

上面的'should'填充了我的自定义组件 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>

还有另外两个例子 订单集 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]);
  }
}

我孩子身上什么也看不出来 订单集

然而,在Chrome的Vue开发工具中,我看到 openOrders 有10条记录 我的订单 , 其他排序 未分配订单 组件具有 orders 道具与正确的数据集以及。 但是 ,内部数据元素( values 在这种情况下)在 订单集 组件没有元素。

订单集组件

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

prop 你可能会变异,你应该把它复制到 data 所以它是“可反应的”。

-简单部分 订单集 不工作/显示总记录的组件:

<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 测试,看看是否是一个时间的事情,没有用。