Vue.js "track-by $ index"、個別にリスト項目をレンダリングする方法

Question

最近まで、私はVueインスタンス内で配列の各要素を1つずつ表示するためにv-showを使用していました。私の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); 
} 

私は重複する値accross来るまでそれはすべて良かったです。これらを処理するために、をtrack-by $indexと置き換えました。具体的にはhereです。私は今私のhtml：<li v-for="tweet in tweets" track-by="$index">{{{ tweet }}}</li>にこれを持っています。問題は、各リストアイテムを個別にレンダリングする代わりに、リスト全体が一度にレンダリングされるということです。

上記のrotateの方法については、track-by="showing == $index"ができませんので、無駄になります。私が理解する限り、これはVueが配列の長さの変化を検出できないためです。 「here」のように回避策があるようですが、「代わりに空の配列でアイテムを置き換えてください」というのは無駄です。何が欠けているのか分かりません。

ここには2つのJsFiddlesがあり、v-showとtrack-by $indexです。

Answer 1

解決策はやや簡単で、結果として得られるコードはよりリーンです。代わりにトリックでし完全v-forとtrack-by $indexディレクティブを離れてやって計算されたプロパティを使用して：htmlファイルで

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

を、それが口ひげで、通常どおりに計算されたプロパティcurrentTweetを追加するだけの質問ですここraw htmlとして解釈タグ：

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

：このような何かのためにそれゆえ

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

必要がありません

JsFiddle here