Question

我是vue.js（2）的新手，我正在开发一个迷你推特平台。目前我正在测试为数组添加新的tweet +名称。除了新添加的项目之外，所有进展顺利都位于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>

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

    }

});

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

Answer 1

因为push最后附加了项目。

您可以改为使用unshift：

this.messages.unshift(this.message)

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

渲染v-for list false order（首先添加新项目）Vue.js

1 个答案: