Vue JS - 将 Json 放入数据

Question

我想把我的JSON数据放入Vue数据中，并显示出来，为什么我不能开始工作？

compiled: function(){
    var self = this;
    console.log('teste');

    $.ajax({
        url: 'js/fake-ws.json',
        complete: function (data) {
            self.$data.musics = data;
            console.log(self.$data.musics);
        }
    })
}

<div id="playlist" class="panel panel-default">
    <div class="panel-body">
        <ul>
            <li v-repeat="musics.item" >
                <a href="">{{nome}}</a>
            </li>
        <ul>
    <div>
</div>  

我无法让代码工作..为什么？

Answer 1

我认为问题在于musics最初并不是 Vue 数据的一部分，因此当您使用 设置其值时self.$data.musics = data，Vue 不知道它需要观看它。相反，您需要使用$add这样的方法： self.$set("musics", data);

来自 VueJs 指南：

在 ECMAScript 5 中，无法检测何时将新属性添加到对象中，或何时从对象中删除属性。为了解决这个问题，观察对象将使用两种方法进行扩展：$add(key, value) 和 $delete(key)。这些方法可用于在触发所需的视图更新时从观察对象中添加/删除属性。