推入數組中的另一個對象

Question

這是我的代碼，它不是最好的代碼，但是它是我目前所知道的。 奇怪的是為什么每次我將一個新對象推入數組時，它都不會進入我的布局。 我尚未嘗試使用CSS解決方案，我認為問題出在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> 

這是推的結果

Answer 1

您不應該將對象用作key屬性。 像這樣嘗試：

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

首先，像這樣，您沒有對象作為key ，也沒有number 。

Answer 2

可以肯定，您的問題是如何處理數組項的唯一性。 您正在使用實際的卡對象作為key 。 不要那樣做 嘗試選擇數組中Object元素的唯一屬性。

如果沒有唯一的塊，則可以使用Array的索引：

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

或只留下key ：

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

此外，如果您的問題是要更改卡的順序，則需要調整插入cards陣列的方式。 Vue將按照您提供的順序迭代您提供的任何內容。 因此，如果您希望新卡位於頂部，則需要將其插入第一個位置。 一種方法是使用...傳播語法：

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

其中{foo: "bar"}是要插入的新對象，而...this.cards是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>