Vue: removing first element from array and iterating over it

Question

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??

cppstudy · Accepted Answer · 2019-03-24 17:25:44Z

2

You could try as suggested here:

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

However, if you only need to apply a different set of styles to your first element, you may want iterate over your whole array and then use CSS' :first-child, which would leave you with a simpler component.

edited Mar 24, 2019 at 17:25

answered Mar 24, 2019 at 17:15

cppstudy

475 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

japrescott · Accepted Answer · 2019-03-24 16:45:20Z

1

using array.splice will return an array with the removed item, not the array without the item you wanted to remove. Splice makes the change to the array directly which means that after splice, just use the receipt array

answered Mar 24, 2019 at 16:45

japrescott

5,0633 gold badges29 silver badges38 bronze badges

Collectives™ on Stack Overflow

Vue: removing first element from array and iterating over it

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related