Question

我相信我对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对象中添加了due属性的订单，并带有与其相关的正确值（并且该属性在设置之前不存在）。即使我可以看到'due'属性对于特定顺序为true，三元运算符也不会应用该类，如下所示：

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

Answer 1

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

Answer 2

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

尝试使用您的due方法

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

引用v-for元素的属性时，在v-for元素上使用v-bind：class三元数产生混淆

2 个答案: