CODEWITHSUNDEEP
vue.jsaxios
Muramash
Muramash

Reputation: 125

Issue on Vue / Axios - Filling cards gone wrong

I'm working on a project using cards in order to show the user the "universe" they can log on.

Fact is, User can be an admin on a given universe, and he can be just a single player on another one, here's a sample.

A normal case

Here, the user got a crown and a bin aside of "Test Realm", so he is an admin on it, and he is a regular player of "Royaume de test". When you create a server, which you become admin on it, it automatically get on top of all other servers.

There's two things that happened and made the whole thing a bit dumb.

Empty

Here, in this case, the user just got connected and the results of his realm don't show of. This case is solved by the "Rechargez le contenu" button, that helps to reload the content, but ...

Big big problem are here

UserTest got connected another time, but this time, the cards just load him as admin of "Royaume de test", but he doesn't even have the rights on it. But since he can click on the crown, which is associated with the realm, he have power on everything and can even destroy a world that wasn't created by him.

So here's my problem, I'm using a method which does axios call, ending on a Promise, but I can't see where I'm wrong

      fillCards: function(){
      let tempCard = []
      if(this.CardsLogData == 0){

              axios.get(XXXXXXXXXXX)
              .then(async (response) => {

                for(let universe of response.data){
                  axios.get(XXXXXXXXXX)
                  .then(response =>{
                    tempCard.push(response.data)
                    console.log('recupCard', tempCard)
                  })
                  .catch(function (error) {console.log(error);})
                }


                Promise.all(tempCard)
                  .then((res) => {
                    axios.get(XXXXXXXXXXXXX)
                    .then(response=>{
                      for(let i in response.data){
                            tempCard[i].idRight = response.data[i].idRights
                        }
                      this.cards = tempCard;
                      })
                      .catch(function (error) {console.log(error);})
                  })
                  .catch(function (error) {console.log(error);})

              })
              .catch(function (error) {console.log(error);})

      }
      },

The method is called on mounted

XXXXXXX are just things I don't really want to be public ^^'

And here is how the crown and the bin are displayed along the card.

        <b-card 
          bg-variant="dark" 
          text-variant="white" 
          class="text-center mb-2"
          v-for="value in cards"
          v-bind:key="value.idUniverse">

            <b-card-text>{{ value.name }} {{ value.firstname }} {{ value.lastname }}</b-card-text>
            <img class="logocrown" v-if="value.idRight == 1" src="./../assets/crown.png" v-on:click="goAdmin(value.idUniverse, value.name)"/>
            {{ value.idRights }}

            <b-button href="#" variant="primary" v-if="CardsLogData<=0" v-on:click="cardsAction(value.idUniverse)">{{ CardMessage }}</b-button>
            <img class="logogarb" v-if="value.idRight == 1" src="./../assets/garbage.png" v-on:click="destroy(value.idUniverse)"/>
            <b-button href="#" variant="primary" v-if="CardsLogData==1" v-on:click="cardsAction(value.idCharacters)">{{ CardMessage }}</b-button>

        </b-card>

I can't see where the problem is, I can still make a verification once the user got in the Admin Pannel to check if he is really admin of the current universe he use, but that's a bit "ghetto", I prefer doing that, plus find a way to not get admin rights on universe that a user don't owe.

Upvotes: 0

Views: 33

Answers (1)

Shoejep
Shoejep

Reputation: 4849

Without understanding all of your code, one problem I can see is that when Promise.all(tempCard) gets executed it might be empty because the promises only get pushed into tempCard after axios returns a response.

I think it's a bit unusual because tempCard should be an array of promises for Promise.all

I haven't tried it, but I think your code would run better like below, tempCard will then be an array of promises and it will wait for all the promises to finish before continuing.

for(let universe of response.data) {
   tempCard.push(axios.get(XXXXXXXXXX));
}

You also have multiple variables called response, I would suggest changing these to reduce confusion.

Upvotes: 1

Related Questions