Question

我最近开始研究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。

任何人都可以告诉我，我在这里做错了吗？

谢谢， Ronak Shah

Answer 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的值。

享受！ Ronak Shah

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

1 个答案: