Vue：从数组中删除第一个元素并迭代它

Posted 2021-03-30

我有一个名为orders的对象数组，对于我迭代的每个顺序，我想选择第一个元素，同时删除第一个元素并迭代其余元素，为此我创建了两个方法，将orders数组作为参数，但是我我得到了奇怪的结果，我得到的第一个元素是你在图像中看到的两次：

这是我的完整组件（注意我的两个方法onlyFirst和receiptExceptFirst）：

<template>
<div style="width:100%; height:auto; display:flex; flex-direction:column; margin:40px 0px;">
    <div v-for="order in user.orders" :key="order.id" style="width:100%; height:auto; border:30px solid rgb(10,10,10); display:flex; flex-direction:column; margin:20px 0px; background-color:rgb(235,235,235); padding:20px;">
        <div style="width:100%; height:auto; display:flex; flex-direction:column;">
            <div style="outline:1px solid red; width:100%; height:150px; display:flex; padding:20px; align-items:center; justify-content:space-between;">
                <div style="width:50%; height:100%; display:flex; align-items:center;">
                    <div style="width:200px; height:100%; background-image:url('/img/misc/default.jpg'); background-size:cover; background-position:center;  margin:0px 20px 0px 0px;"></div>
                    <span style="font-size:17px; color:black; margin:0px 0px;">{{ onlyFirst(order.receipt).title }}</span> 
                </div>
                <span style="font-size:17px; color:black;">Código: {{ onlyFirst(order.receipt).unicode }}</span>
                    <span style="font-size:17px; color:black;">Precio: {{ onlyFirst(order.receipt).price }} €</span>
            </div>
            <div v-for="(items, index) of receiptExceptFirst(order.receipt)" :key="index" style="width:100%; height:150px; display:flex; padding:20px; align-items:center; justify-content:space-between;">
                <div style="width:50%; height:100%; display:flex; align-items:center;">
                    <div style="width:200px; height:100%; background-image:url('/img/misc/default.jpg'); background-size:cover; background-position:center;  margin:0px 20px 0px 0px;"></div>
                    <span style="font-size:17px; color:black; margin:0px 0px;">{{ items.title }}</span> 
                </div>
                <span style="font-size:17px; color:black;">Código: {{ items.unicode }}</span>
                    <span style="font-size:17px; color:black;">Precio: {{ items.price }} €</span>
            </div>
            <button style="width:auto; height:auto; margin:0px 0px 0px auto; display:flex; align-items:center;" type="button">
                <span style="font-size:17px; color:var(--web_primary_color); margin-left:auto;">mostrar todo</span>
                <i class="fas fa-sort-down" style="font-size:20px; color:var(--web_primary_color); margin:0px 5px;"></i>
            </button>
            <div style="width:100%; height:1px ; border-bottom:2px solid rgb(56,56,56); margin:10px 0px;"></div>
            <div style="width:100%; height:auto; display:flex; align-items:center;">
                <span style="font-size:15px; color:rgba(0,0,0,0.9);">Canjeado el 23/4/2018 a las 14:00</span>
                <span style="font-size:20px; color:rgba(0,0,0,0.9); margin-left:auto;">Total:</span>
                <span style="font-size:20px; color:rgba(0,0,0,0.9);">{{ order.cartTotalPrice }} €</span>
            </div>
        </div>
    </div>
</div>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex';
export default{
name: 'ORDERList1',


props: {
    user: {required:true }
},


mounted () {
    console.log(this.$options.name+' component successfully mounted');
},


methods:{


    onlyFirst: function(receipt){
        let onlyFirst = receipt[0];
        return onlyFirst;
    },


    receiptExceptFirst: function(receipt){
        let receiptExceptFirst = receipt.splice(0, 1);
        console.log(receiptExceptFirst);
        return receiptExceptFirst;
    }


}


}
</script>

我究竟做错了什么？？

答案

使用array.splice将返回一个包含已删除项目的数组，而不是没有您要删除的项目的数组。 Splice直接对数组进行更改，这意味着在拼接后，只需使用receipt数组

另一答案

你可以尝试建议here：

receiptExceptFirst: function(receipt){
  return receipt.slice(1);
}

但是，如果您只需要为第一个元素应用不同的样式集，则可能需要遍历整个数组，然后使用CSS':first-child，这将为您提供更简单的组件。