Vue.js "track-by $index"，如何单独呈现列表项

Question

直到最近，我一直在使用 v-show 在我的 Vue 实例中显示数组中的每个元素，一次一个。我的 html 有以下行：<li v-for="tweet in tweets" v-show="showing == $index">{{{ tweet }}}</li>"。我的根 Vue 实例是这样构造的（感谢！）：

new Vue({
    el: '#latest-tweets',
    data: function(){
        return {
            tweets: [],
            showing: 0
        };
    },
    methods:{
        fetch:function(){
            var LatestTweets = {
                "id": '706642968506146818',
                "maxTweets": 5,
                "showTime": false,
                "enableLinks": true,
                "customCallback":this.setTweets,
                "showInteraction": false,
                "showUser": false
            };
            twitterFetcher.fetch(LatestTweets);
        },
        setTweets: function(tweets){
            this.tweets = tweets;
            console.log(tweets);
        },
        rotate: function(){
            if(this.showing == this.tweets.length - 1){
                this.showing = -1;
            }
            this.showing += .5;
            setTimeout(function(){
                this.showing += .5;
            }.bind(this), 1000);
        }
    },
    ready:function() {
        this.fetch();
        setInterval(this.rotate, 10000);
}

一切都很好，直到我遇到重复值。为了处理这些，我按照指定的 here 将 v-show 替换为 track-by $index。现在我的 html 上有这个：<li v-for="tweet in tweets" track-by="$index">{{{ tweet }}}</li>。问题在于，不是单独呈现每个列表项，而是一次呈现整个列表。

至于上面的rotate方法，由于我做不到track-by="showing == $index"，现在已经没有用了。据我了解，这是由于 Vue 无法检测到数组长度的变化。似乎有一个解决方法，详见 here，即 "replace items with an empty array instead"，但我没有成功。我不知道我错过了什么。

这里有几个 JsFiddle，v-show and track-by $index。

Answer 1

解决方案毕竟相当简单，并且生成的代码更精简。完全取消 v-for 和 track-by $index 指令并使用计算的属性代替了技巧：

computed: {
  currentTweet: function () {
    return this.tweets[this.showing]
  }
}

在 html 文件中，这只是一个像往常一样添加计算的属性 currentTweet 的问题，带有小胡子标签，这里解释为 raw html:

<li>{{{ currentTweet }}}<li>

因此不需要像这样的东西：

<li v-for="tweet in tweets" track-by="$index">{{{ tweet }}}</li>

JsFiddle here

Vue.js "track-by $index"，如何单独呈现列表项

Vue.js "track-by $index", how to render list items individually

javascript

vue.js