為什么我不能推送到 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
}

上面的“應該”用myOrders的計算值填充我的名為order-set的自定義組件：

<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的order-set還有另外兩個實例。

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屬性也具有正確的數據集。 但是， order-set組件上的內部數據元素（在本例中為values ）沒有元素。

訂單集組件

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

我認為問題在於OrderSet組件的數據中的values在道具orders更改時沒有反應。 讓我們嘗試計算而不是數據

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

更新：為什么在這種情況下數據的屬性不是反應性的

定義組件時，必須將 data 聲明為返回初始數據對象的函數，因為將使用相同的定義創建許多實例。 如果我們使用普通對象作為數據，那么同一個對象將通過引用在所有創建的實例中共享！ 通過提供數據函數，每次創建新實例時，我們都可以調用它來返回初始數據的新副本。

如果需要，可以通過 JSON.parse(JSON.stringify(...)) 傳遞 vm.$data 來獲得原始對象的深層克隆。

因此，這種情況下的values將從openOrders克隆，導致openOrders上的更改不會影響values

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

Answer 2

僅查看您的代碼后，我相信您應該在創建的函數中調用推送，而不是在掛載時調用。

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

這里的邏輯是它的執行方式。
1.創建
2.計算
3.裝上