Question

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

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

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

至于上面的rotate方法，因为我不能track-by="showing == $index"，所以它现在没用了。据我了解，这是由于Vue无法检测到数组长度的变化。似乎有一个解决方法，如详细here，即“替换带有空数组的项目”，我没有做到这一点。我无法弄清楚我错过了什么。

这里有几个JsFiddles，v-show和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”，如何单独呈现列表项

1 个答案: