时间戳

首页 > 解决方案 > Vue：从数组中删除第一个元素并对其进行迭代

javascript - Vue：从数组中删除第一个元素并对其进行迭代

问题描述

我有一个称为订单的对象数组，对于我迭代的每个订单，我想选择第一个元素并删除第一个元素并遍历其余元素，为此我创建了两个将订单数组作为参数的方法，但是我我得到了奇怪的结果，我得到了第一个元素两次，如图所示：

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

<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 }} €&lt;/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 }} €&lt;/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 }} €&lt;/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>

我究竟做错了什么？？

标签： javascriptvue.js

解决方案

您可以按照这里的建议尝试：

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

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

推荐阅读