Vue JS列出项目v-repeat track-by属性不起作用答案

【问题标题】：Vue JS lists items v-repeat track-by attribute not workingVue JS列出项目v-repeat track-by属性不起作用
【发布时间】：2016-01-16 19:52:33
【问题描述】：

我最近开始研究 Vue JS。但是，我面临一个问题。请参考以下代码：-

            <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 和 track-by 参数的使用。但是我无法使其工作。当我将数组替换为此 array("name" => "Test name Changed", "_uid" => 0);echo json_encode($array);

不是将第一个索引的值从“测试名称 0”更新为“测试名称已更改”，而是替换整个 ul li。

谁能告诉我我在这里做错了什么？

谢谢，罗纳克·沙阿

【问题讨论】：

标签： php jquery vue.js

【解决方案1】：

找到解决方案！

这是工作代码：-

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

上面的代码会追加新的li，或者更新改变的li的值。

享受吧！罗纳克·沙阿

【讨论】：