CODEWITHSUNDEEP
javascripthtmlvuejs2
Giesburts
Giesburts

Reputation: 7658

Render v-for list false order (new added items first) Vue.js

I am new to vue.js (2) and I am working on a mini twitter platform. Currently I am testing to add a new tweet + name to an array. All that is going well except the new added items are placed below of the v-for list. That is standard of course, But I would like to place the new added items on top of the list, so the new tweets are visible at the top.

I don't know how I could achieve this. I am reading the docs but that doesn't help unfortunately.

HTML

 <transition-group name="list">

    <div class="social-item " v-for="message in messages" :key="message">


        <img class="img-responsive img-full" :src="message.image">


        <p>
            {{ message.message }}
        </p>

        <div class="platform-twitter" v-if="message.platform == 'fb'">

            <strong class="name facebook">
                <a :href="message.adress" target="_blank">
                    <i class="fa fa-facebook"></i> {{ message.name }}
                </a>
            </strong>

            <div class="stats" v-if="message.fblike > 0 || message.share > 0">
               <i class="fa fa-thumbs-up"></i> {{ message.fblike }}
               <i class="fa fa-share"></i> {{ message.share }}
            </div>

        </div>

        <div class="platform-twitter" v-if="message.platform == 'tw'">

            <strong class="name twitter">
                <a :href="message.adress" target="_blank">
                    <i class="fa fa-twitter"></i> {{ message.name }}
                </a>
            </strong>

            <div class="stats" v-if="message.retweets > 0 || message.likes > 0">
                <i class="fa fa-retweet"></i> {{ message.retweets }}
                <i class="fa fa-star"></i> {{ message.likes }}
            </div>

        </div>

    </div>

    </transition-group>

JS

    new Vue({

        el: '#app',

        data: {


            message: {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'},

            messages: [

                {message: 'Lorem ipsum', name: 'John Doe', fblike: 0, share: 0, retweets: 1, likes: 0, image: '', adress: '', platform: 'tw'},
                {message: 'Lorem ipsum', name: 'John Doe', fblike: 0, share: 0, retweets: 1, likes: 0, image: '', adress: '', platform: 'fb'}


            ]

        },

        methods: {
        addMessage: function() {
            if(this.message.message){
                this.messages.push(this.message);
                this.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
            }
        }

    }

});

I've created a simple https://jsfiddle.net/25d813c4/ with the part of my application.

Upvotes: 1

Views: 297

Answers (1)

CodinCat
CodinCat

Reputation: 15914

Because push appends items at last.

You can use unshift instead:

this.messages.unshift(this.message)

ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

Upvotes: 2

Related Questions