在引用V-For元素的属性时，使用V-bind:类三元元的混淆:类三元

Question

我相信我对Vue的理解遇到了一个绊脚石。据我所知，引用使用V-For列出的对象的属性是有效的。但是，当我尝试在V型绑定中进行此操作：类三元操作时，由于某种原因，它失败了。

上下文：

我要做的是基本上在V-For元素内部发出一个组件，该元素会发出事件，V-For元素将拾取该事件，并根据该事件进行调整基于自己的属性。在这种情况下，我正在确定是否应通过对v-for元素的引用设置订单作为布尔值（即 element 作为元素）。

示例：

我已经稍微简化了以下代码，但已使用这些版本进行了测试，问题仍然存在。

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添加新属性。

在您的due方法

中尝试一下

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

Answer 2

vue无法检测属性添加或删除。尝试在order组件的data部分中具有due的初始值（例如false）。