在引用 v-for 元素的属性时，在 v-for 元素上使用 v-bind:class ternary 造成混淆答案

【问题标题】：Confusion using v-bind:class ternary on a v-for element when referencing the properties of the v-for element在引用 v-for 元素的属性时，在 v-for 元素上使用 v-bind:class ternary 造成混淆
【发布时间】：2019-03-21 10:57:05
【问题描述】：

我相信我在理解 Vue 时遇到了一个绊脚石。据我所知，引用使用 v-for 列出的对象的属性是有效的。但是，当我尝试在 v-bind:class 三元操作中执行此操作时，由于某种原因它失败了。

上下文：

我要做的基本上是让 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}

【问题讨论】：

您是否尝试过使用object syntax 进行更改？我不确定这会有所帮助，但值得一试。

标签： javascript vue.js

【解决方案1】：

在创建组件时数据对象上不可用的属性不是反应性的。您需要明确告诉 vue 添加新属性。

在你的 due 方法中试试这个

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

【讨论】：

【解决方案2】：

Vue cannot detect property addition or deletion。尝试在order 组件的data 部分中为due 设置一个初始值（如false）。

【讨论】：