渲染 v-for 列表错误顺序（新添加的项目优先）Vue.js答案

【问题标题】：Render v-for list false order (new added items first) Vue.js渲染 v-for 列表错误顺序（新添加的项目优先）Vue.js
【发布时间】：2017-03-29 09:51:32
【问题描述】：

我是 vue.js 的新手 (2)，我正在开发一个迷你 twitter 平台。目前我正在测试将新的推文+名称添加到数组中。除了新添加的项目位于 v-for 列表的下方之外，一切都进行得很好。这当然是标准的，但我想将新添加的项目放在列表的顶部，这样新的推文就可以在顶部看到。

我不知道我怎么能做到这一点。我正在阅读文档，但不幸的是这无济于事。

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>

    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'};
            }
        }

    }

});

我用我的应用程序的一部分创建了一个简单的https://jsfiddle.net/25d813c4/。

【问题讨论】：

标签： javascript html vuejs2

【解决方案1】：

因为push最后追加了项目。

您可以改用unshift：

this.messages.unshift(this.message)

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

【讨论】：