Así que tengo una matriz con notificaciones para todos en una empresa de ventas. Tienen diferentes idTypes según el tipo de notificación que sea. Y está el usuario que ha iniciado sesión y luego está el usuario que realizó la venta. Algunas de las notificaciones solo deben ser visibles para el usuario que inició sesión y otras pueden ser visibles para todos.
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 } ]Entonces, si soy un usuario: 12, solo debería poder ver los primeros objetos en la matriz (la identificación del usuario y del vendedor son las mismas). Y no puedo averiguar cómo hacerlo. He intentado hacer diferentes cálculos y métodos.
Tengo un pequeño componente solo para la tarjeta donde debería ver una imagen del vendedor (enviando 'nota' como accesorio):
<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>Y luego tengo un componente que se parece a esto donde importo uno arriba ya que debería tener valores diferentes en cada tarjeta:
<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>Y luego importo esto a otro componente para mostrar todas las notificaciones diferentes, aquí es donde accedo a la matriz:
<div v-for="(note, idx) in notifications" :key="idx"> <activity class="white my-3" :note="note" /> </div>Así que he intentado hacer diferentes cálculos y métodos, pero nada parece funcionar.
Sé que necesito hacer algunas declaraciones if para generar las diferentes matrices. Pero, ¿debería hacerlo de forma computarizada o con un método? ¿Cuál es la mejor manera de hacerlo? estoy usando javascript/mecanografiado
Solo tiene que usar la propiedad computed para ajustar su notificación.
computed() { filteredNotifications: function(){ return this.notifications.filter(node => node.seller === this.currentUserId) }, }, Donde currentUserId es la identificación del usuario actual
Y dentro de la plantilla, use esta propiedad calculada para iterar el componente como se muestra a continuación
<div v-for="(note, idx) in filteredNotifications" :key="idx"> <activity class="white my-3" :note="note" /> </div>