v-if inside v-for is given me 属性或方法“*”未在实例上定义

Question

我希望能够比较 vue 中的两个日期，如果日期小于今天的日期，则向 div 添加一个类。这是我的代码：

<tr v-for="car in cars">
   <div v-if="Date.now() <= new Date(car.ContractDate)">if true, add class to this div</div>
</tr>

但我收到了这个错误：

[Vue 警告]：实例上未定义属性或方法“car” 但在渲染期间引用。确保该属性是 反应式，无论是在数据选项中，还是对于基于类的组件，通过 初始化属性。

当我尝试在我的v-for 中执行<td>{{ car.ContractDate }}</td> 时，我没有任何问题。

Answer 1

我根据您提供的信息创建了一个粗略的示例：

new Vue({
  el: '#app',
  data() {
    return {
      cars: [{
        name: 'Car X',
        contractDate: '9/17/2016, 1:21:34 PM'
      },
      {
        name: 'Car Y',
        contractDate: '9/17/2020, 1:21:34 PM'
      }]
    }
  },
  methods: {
    compareDate(d) {
      return (new Date(d)).getTime() > (new Date()).getTime();
    }
  }
});

.active {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" v-cloak>
  <table>
    <tbody>
      <tr v-for="car in cars">
        <td>{{car.name}}</td>
        <td>
          <div :class="{ active: compareDate(car.contractDate) }">
            {{car.contractDate}}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

注意事项

我没有在实际模板中进行比较，而是选择了一种方法 - 感觉更干净

我再次使用object syntax 进行类绑定，纯粹是偏好，如果您愿意，可以使用三元。

希望这会有所帮助！

Answer 2

根据您的代码：https://pastebin.com/MmBcp0Bx

你应该删除这一行：

<div v-if="Date.now() <= new Date(car.ContractDate)">if true, add class to this div</div>