Problème avec les getters de VueJs

intelligid
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

<template>
  <div class="scroll-container messages-container">
    <ul class="messages">
      <li>
        <div class="text-center">
                            <span ng-show="isLoading == true">
                                <span class="fa fa-refresh fa-spin fa-lg"></span>
                            </span>
          <span ng-show="isLoading == false">
                                <button class="ui mini button" ng-click="loadMoreMessages()">voir plus de messages</button>
                            </span>
        </div>
      </li>
      <message v-for="message in sortedMessages" :message="message"></message>
    </ul>
  </div>
</template>
<style>
  // du CSS pas utile
</style>
<script>
  import Message from './message.vue'
  import {conversationById, conversationMessages} from 'src/vuex/getters'

  export default {
    components: {
      Message
    },
    props: [ 'conversation-id' ],
    vuex: {
      getters: {
        conversation : conversationById,
        messages : conversationMessages
      }
    },
    computed: {
      sortedMessages () {
        return this.messages
          .slice()
          .sort((a, b) => a.timestamp - b.timestamp)
      }
    }
  }
</script>

Ce que je veux

J'aimerais récupérer la conversation qui est dans le state. Pour ça j'ai l'ID contenu dans la variable conversationId.

Mais les getters ne sont pas prévues pour ça. Comment est ce que je peux faire pour obtenir la conversation (et les messages contenues dedans) à partir de l'id ?

Edit :
Les conversations sont stockés de cette façon : 

conversations : {
    1 : {
        id: 1,
        messages : [ 
            // des messages
        ],
        name: "nom"
    }
}

4 réponses

PhiSyX

Il faudrait que tu nous montres un exemple de donnée que peut contenir ton state.

Si elle est comme suit: (state)

conversations: [{"id": "abcd", messages:[{"text": "Premier message de la première conv"}]}, {"id": "defg", messages:[{"text": "Premier message de la deuxième conv"}]}]
conversationId: "abcd"

Boucle ton tableau de conversations, que tu récupères depuis le state, (avec v-for="conversation in conversations") et tu rajoutes une condition avec v-if/v-show="conversation.id === conversationId"?

intelligid
Auteur

J'ai édité le sujet. Les conversations sont stockés sous cette forme:

conversations : {
    1 : {
        id: 1,
        messages : [ 
            // des messages
        ],
        name: "nom"
    }
}

@PhiSyX Ta solution pourrait fonctionner mais ça n'a pas l'air optimal de boucler juste pour une seule conversation. :/

PhiSyX

Ha mais au fait dans le code que tu as montré, tu as conversation : conversationById. Ça sert à quoi?

Ça n'est pas la donnée que tu as attend?

{
        id: 1,
        messages : [ 
            // des messages
        ],
        name: "nom"
}
AlexJM

Euh juste, ng-show, c'est normal que y'ait du angular avec du vue ?