javascript - Vue，在数据数组上使用运算符

Question

我现在有一个事件对象，我正在将其转储到控制台，其中包含 id、日期、类别和通知数组(数组中的每个项目都有 notification_type 和 notification_message)

在控制台中看起来像这样:

0:
  iD: 123
  date: "2020/03/03"
  category: "New"
  notifications: Array(2)
    0:
      notification_type: "new notification"
      notification_message: "teting notifications"
    1:
      notification_type: "internal notification"
      notification_message: "teting internal"

所以我在主事件对象上有我的 vue for 循环，它工作得很好，除了我不知道如何获得那里的评论。基本上，我希望它只显示新通知类型的消息:

        <tr v-for="event in events">
          <td>{{ event.id }}</td>
          <td>{{event.date}}</td>
          <td>{{event.category}}</td>
          <td v-if="event.notifications.notification_type === 'new notification'">{{event.notifications.notification_message}}</td>
        </tr>

这仍然会加载除通知之外的所有内容，而通知根本没有加载。

如何更改此设置以仅获取此表格数据单元格上的“新通知”值？

Answer 1

您的 event.notifications 通知是一个数组，这意味着您无法访问数组内每个元素的对象内的属性。它将是未定义。

在这种情况下，您正在检查

undefined === 'new notification' // false

如果你总是想访问第一个元素，那么只需event.notifications[0].notification_type。否则，您需要使用 v-for 循环内部数组。