Vue: removing first element from array and iterating over it


#1

Hi everybody, I have an array of objects called orders, for each order I iterate I want to pick the first element and also remove the first and iterate over the rest, for this purpose I created two method which take the orders array as parameter, however I’m getting weird results, I’m getting the first element two times as you can see in the image:

This is my full component (notice my two methods onlyFirst and 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>

What am I doing wrong??


#2

Looks like you need to generate the first order and the other array of orders using a computed, that way you do not worry about mutate the original array of orders.

Here’s an example

Hope it helps.

PS: Not really sure what’s your case, but using inline css in the style attribute for all your html tags is probably not a good idea.


#3

Side question, out of curiosity: Why is your template full of inline styles?