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属性不起作用

回答

相关问题