过滤数组在vue中生成不同的数组

Question

所以我有一个数组，其中包含销售公司中每个人的通知。它们有不同的 idTypes，这取决于它是什么类型的通知。并且有登录的用户，然后是进行销售的用户。有些通知应该只对登录用户可见，有些通知对所有人可见。

notifications: [
  0: {
    idType: 1
    type: "delivered"
    user: 12
    visibility: true
    seller: 15
    product: "phone"
  }
  1: {
    idType: 2
    type: "meeting"
    user: 12
    visibility: null
    seller: 12
    company: "hotell"
  }
  2: {
    idType: 1
    type: "invoiced"
    user: 15
    visibility: null
    seller: 11
    value: 150000
  }
]

因此，如果我是用户：12，我应该只能看到数组中的第一个对象（用户和卖家 ID 相同）。而且我不知道该怎么做。我尝试过不同的计算和方法。

我有一个卡片的小组件，您应该在其中看到卖家的图片（发送 'note' 作为道具）：

<div class="d-flex justify-space-between">
    <div class="ml-4 d-flex justify-space-between align-center">
        <seller :id="note.seller" v-slot="{ seller }">
            <user-avatar :src="seller.profileImage" :size="36" class="mr-3 mr-sm-5 
            ml-n3 ml-sm-0"
        /></seller>
        <div class="d-flex flex-column">
            <h6 class="font-weight-bold">{{ note.title }}</h6>
            <slot name="info" />
        </div>
    </div>
</div>

然后我有一个看起来像这样的组件，我在上面导入了一个组件，因为它在每张卡片中应该有不同的值：

         <activity :note="note">
            <template #info>
                <span v-if="note.idType === 1">
                    {{ note.type }} {{ note.product }}
                </span>
                <span v-if="note.idType === 3">
                    {{ note.type }} for {{ note.value }} $
                </span>
            </template>
          </activity>

然后我将其导入另一个组件以呈现所有不同的通知，这是我访问数组的地方：

<div v-for="(note, idx) in notifications" :key="idx">
    <activity
        class="white my-3"
        :note="note"
    />
</div>

所以我尝试了不同的计算和方法，但似乎没有任何效果。

我知道我需要做一些 if 语句来生成不同的数组。但是我应该用计算还是方法来做呢？最好的方法是什么？我正在使用 javascript/typescript

Answer 1

您只需使用 computed 属性来减少您的通知。

computed() {
    filteredNotifications: function(){
        return this.notifications.filter(node => node.seller === this.currentUserId)
    },
},

其中currentUserId是当前用户的id

并在模板内部使用此计算属性迭代组件，如下所示

<div v-for="(note, idx) in filteredNotifications" :key="idx">
    <activity
        class="white my-3"
        :note="note"
    />
</div>

过滤数组在vue中生成不同的数组

Filter array to generate different arrays in vue

javascript

arrays

typescript

vue.js

computed-properties