CODEWITHSUNDEEP
javascriptarraysvue.js
Matheus Wanderley
Matheus Wanderley

Reputation: 11

push another object in array

This is my code, it's not the best one, but its what I know at the moment. It's strange why everytime I push a new object into the array it doesn't enter in my layout. I haven't tried a solution with css, I think the problem is with the javascript

export default {
  data:()=>{
    return{
      cards:[
        {title: 'Azorius de volta ao topo!', subtitle: 'Baralho volta a vencer um Magic Fest Modern após longo hiato.', head: 'Modern'},
        {title: 'Pauper no Papel', subtitle: 'Wizards oficializa o formato', head: 'Pauper'},
        {title: 'Hogaak Winter', subtitle: 'Possível última semana do monstro', head: 'Modern'}
      ],
    }
  },
  components:{
    Modal
  },
  methods:{
    loadMore(){
      console.log(this.cards);
      this.cards.push({title: 'alfafa', head: 'alfafa'}) 
    }
}
}
.footer-card{
   background-image: linear-gradient(to bottom, #1a1a1a, #666666);
}
.icons{
  color: #fff !important;
}
.title{
  font-family: 'Arial';
  font-size: 12px
}
.subtitle{
  font-family: 'Arial';
  font-size: 12px;
  font-weight: 100;
}
.card-zise{
  width: 21.500em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <v-flex xs6 class="mx-auto" style="display:flex">
  <v-card
    
    class="mx-auto" style="padding: 0 0.625em"
    v-for="card in cards" :key="card"
  >
    <v-list-item>
      <v-list-item-avatar color="grey"></v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title class="headline">{{card.head}}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

    <v-img
      src="https://cdn.vuetifyjs.com/images/cards/mountain.jpg"
      height="194"
    ></v-img>

    <v-card-text v-bind="cards" class="title">
      {{ card.title }} <br/>
    </v-card-text>
  </v-card>
    </v-flex>
    <v-btn @click="loadMore()">Carregar Mais</v-btn>

here is the results of the push

Upvotes: 0

Views: 200

Answers (2)

zero298
zero298

Reputation: 26867

Pretty sure your problem is how you deal with uniqueness of Array items. You are using the actual card object as the key. Don't do that. Try to pick a unique property of the element of the Object within the Array.

If there is no unique piece to it, you could potentially use the index of the Array:

<div v-for="(card, idx) in cards" :key="idx">{{card}}</div>

or just leave the key off:

<div v-for="card in cards">{{card}}</div>

Additionally, if your issue is that you want to change the order of the cards, you need to adjust how you are inserting into the cards array. Vue will iterate whatever you give it in the order that you provide it. So if you want the new card to be at the top, you need to insert it in the first position. One way to do that is to use ... spread syntax:

this.cards = [{foo: "bar"}, ...this.cards];

Where {foo: "bar"} is the new Object to insert and ...this.cards is the expansion of the Array this.cards.

const app = new Vue({
  el: "#app",
  data: () => {
    return {
      cards: [{
          title: 'Azorius de volta ao topo!',
          subtitle: 'Baralho volta a vencer um Magic Fest Modern após longo hiato.',
          head: 'Modern'
        },
        {
          title: 'Pauper no Papel',
          subtitle: 'Wizards oficializa o formato',
          head: 'Pauper'
        },
        {
          title: 'Hogaak Winter',
          subtitle: 'Possível última semana do monstro',
          head: 'Modern'
        }
      ],
    }
  },
  methods: {
    loadMore() {
      this.cards = [{
          title: 'alfafa',
          head: 'alfafa'
        },
        ...this.cards
      ]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <div v-for="card in cards">
      <div>{{card.head}}</div>
    </div>
  </div>
  <button @click="loadMore()">Carregar Mais</button>
</div>

Upvotes: 0

sandrooco
sandrooco

Reputation: 8716

You shouldn't be using an object as key attribute. Try it like this:

<v-card
    class="mx-auto"
    v-for="(card, cardIndex) in cards" :key="'card-' + cardIndex"
  >
...
</v-card>

Firstly like this you don't have objects as key and also not just a number.

Upvotes: 1

Related Questions