在引用 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)
}