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

<td v-if="event.notifications.notification_type === 'new notification'">

如果您的 event.notifications 是一个数组，那么您将无法像这样访问它，所以我认为这就是您的问题所在。您可能想在此处添加另一个 for。这样的事情应该可以工作：

<td v-for="notif in event.notifications" v-if="notif.notification_type === 'new notification'">{{notif.notification_message}}</td>

Answer 2

Just change your vue code like below :
Here event['notifications'] is an array so it needs to be handled:

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

Answer 3

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

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

undefined === 'new notification' // false

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