Vue JS列出項目v-repeat track-by屬性不起作用

我最近開始研究Vue JS.但是，我面臨着一個問題。請參考下面的代碼： -Vue JS列出項目v-repeat track-by屬性不起作用

  <div id="demo"> 
       <ul id="list_music"> 
        <li v-repeat="musics" track-by="_uid">{{ name }}</li> 
       </ul> 
      </div> 

      var demo = new Vue({ 
      el: '#demo', 
      data : { 
       musics : null 
      }, 
      created: function() { 
       //this.fetchData(); 
       setInterval(this.fetchData, 5000); 
      }, 
      methods : { 
       fetchData: function(){ 
        var self = this; 
        console.log('test'); 
        $.ajax({ 
         type: "POST", 
         dataType : "json", 
         url : "test.php", 
         data: {}, 
         success: function (response){ 
          //self.$data.musics = response; 
          self.$set("musics", response); 
         } 
        }); 
       } 
      } 
     });

和內test.php的PHP代碼是如下：

  <?php 
     $array = [ 
      array("name" => "Test name 0", "_uid" => 0), 
      array("name" => "Test name 1", "_uid" => 1), 
      array("name" => "Test name 2", "_uid" => 2), 
      array("name" => "Test name 3", "_uid" => 3), 
      array("name" => "Test name 4", "_uid" => 4), 
      array("name" => "Test name 5", "_uid" => 5), 
     ]; 
     echo json_encode($array); 
     ?>

按照上面的代碼中，我試圖實現的是，代碼將每5秒執行一次ajax請求，並且會動態地在ul標籤下插入新的li元素。並且如果任何舊值被改變，那麼它也應該觸發視圖中的改變。

我已經看到了Vue的JS引導http://vuejs.org/guide/list.html#Using_track-by和使用的軌道由參數，但卻我不能讓它work.When我更換陣列本 array("name" => "Test name Changed", "_uid" => 0);echo json_encode($array);

而是更新價值第一個索引從「測試名稱0」改爲「測試名稱已更改」替換整個ul裏。

任何人都可以告訴我我在這裏做什麼錯嗎？

感謝， Ronak沙阿

來源

2015-10-18 Ronak Shah

得到了解決！

這裏是工作代碼： -

var demo = new Vue({ 
       el: '#demo', 
       data : { 
        musics : null, 
        uid : [ 

        ] 
       }, 
       created: function() { 
        //this.fetchData(); 
        setInterval(this.fetchData, 5000); 
       }, 
       methods : { 
        fetchData: function(){ 
         var self = this; 
         console.log('test'); 
         $.ajax({ 
          type: "POST", 
          dataType : "json", 
          url : "test.php", 
          data: {}, 
          success: function (response){ 
           //self.$data.musics = response; 
           if(self.$data.musics != null){ 
            $.each(response, function (k,v){ 
             if(jQuery.inArray(v._uid, self.$data.uid) !== -1){ 
              var key = getKey(v._uid, self.$data.musics); 
              self.$data.musics.$set(key,v); 
             } else { 
              self.$data.musics.push(v); 
              self.$data.uid.push(v._uid); 
             } 
            }); 
            console.log(self.$data.uid); 
           } else { 
            self.$set("musics", response); 
            $.each(response, function (k,v){ 
             self.$data.uid.push(v._uid); 
            }); 
            console.log(self.$data.uid); 
           } 
          } 
         }); 
        } 
       } 
      }); 

      function getKey(uid, musics){ 
       var key; 
       $.each(musics, function (k,v){ 
        if(v._uid == uid){ 
         key = k; 
         return false; 
        } 
       }); 

       return key; 
      }

上面的代碼將追加新麗，或更新改變了李的價值。

享受！ Ronak Shah

來源

2015-10-19 18:13:12

Vue JS列出項目v-repeat track-by屬性不起作用

回答

相關問題