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>

here is the results of the push

Answer 1

您不应将对象用作key属性。像这样尝试：

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

首先，您没有key这样的对象，而且也不仅仅是number。

Answer 2

很确定您的问题是如何处理数组项的唯一性。您将实际的卡对象用作key。不要那样做尝试在数组中选择对象元素的唯一属性。

如果没有唯一的片段，则可以使用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是数组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>

推入数组中的另一个对象

2 个答案: