在引用 v-for 元素的屬性時，在 v-for 元素上使用 v-bind:class ternary 造成混淆

Question

我相信我在理解 Vue 時遇到了一個絆腳石。 據我所知，引用使用 v-for 列出的對象的屬性是有效的。 但是，當我嘗試在 v-bind:class 三元操作中執行此操作時，由於某種原因它失敗了。

語境：

我要做的基本上是在 v-for 元素內有一個組件發出一個事件，v-for 元素將接收該事件，並根據它調整它自己的屬性。 在這種情況下，我通過對 v-for 元素的引用（即作為元素的元素）來確定訂單是否到期作為布爾值集。

例子：

我已經稍微簡化了下面的代碼，但是已經用這些版本對其進行了測試，問題仍然存在。

html:

  <div class="order" :class="[order.due ? 'due' : '']" v-for="order in orders" v-cloak>
    <div class="name" v-cloak>ORDER #{{order.id}}</div>
    <time-count :date="order.submitted" v-on:due="due(order)"></time-count>
    <div class="status" v-cloak>
        {{order.status}}
    </div>
  </div>

在 JS 中，這個方法：

due(order) {
  order.due = true;
},

在組件中：

if (this.minute >= 15 || this.hour > 0 || this.day > 0) {
    this.$emit("due");
}

我已經測試了所有內容，直到可以看到添加了到期屬性的 Vue 對象中的順序，以及與之關聯的正確值（並且該屬性在設置之前不存在）。 三元運算符不應用該類，即使我可以看到特定訂單的“到期”屬性為真，如下所示：

{"order":"11","submitted":"2019-03-21 03:14:05","status":"CONFIRMED - AWAITING PAYMENT","due":true}

Answer 1

Vue 無法檢測到屬性添加或刪除。 嘗試在order組件due data部分中設置一個初始值（如false ）。

Answer 2

在創建組件時數據對象上不可用的屬性不是反應性的。 您需要明確告訴 vue 添加新屬性。

用你due得的方法試試這個

due(order) {
 this.$set(this.order, 'due', true)
}