v-for 中的 v-if 和 v-else 用于不同的文本渲染

Question

我找不到在 v-for 中选择不同选项来呈现文本的方法。是否有可能或者我需要以不同的方式构造逻辑来执行以下代码之类的操作？

<template>
    <ul v-show="showNotifications">
        <li v-for="notification in notifications">
            // if notification.type = 'friend request'
            New friend request from {{ notification.name }}
            // else 
            New notification from {{ notification.name }}
        </li>
    </ul>
</template>

Notification 是一个包含名称和通知类型等数据的对象数组。

Answer 1

使用另一个template 元素，如下所示（未测试）

<template>
    <ul v-show="showNotifications">
        <li v-for="notification in notifications">
            <template v-if="notification.type == 'friend request'">
            New friend request from {{ notification.name }}
            </template>
            <template v-else>
            New notification from {{ notification.name }}
            </template>
       </li>
   </ul>

Answer 2

我按照 Xymanek 所说的做了，但这并不完全适合我，我还添加了一个这样的方法，因为我意识到组件对“v-for”中的变量是反应性的，在这种情况下是“通知”

forceReload(){
      this.files.push(fakeNotification);
      this.files.pop();
    }

正如所见，这只是通过将假对象推送到数组来强制 v-for “重新渲染”。 你可以在“notification.type”的值改变后调用这个方法。