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中，无法检测何时将新属性添加到Object，或者何时从Object中删除属性。为了解决这个问题，观察对象将使用两种方法进行扩充：$ add（key，value）和$ delete（key）。这些方法可用于在触发所需的视图更新时添加/删除观察对象的属性。

Answer 2

this引用整个Vue对象，因此musics对象已经可以通过this.musics访问。 VueJS API参考中的更多信息here和VueJS指南中的here以及this here上的更多信息。

考虑到这一点，代码看起来应该是这样的：

var playlist = new Vue({

 el: '#playlist',

 data:{
   musics: '',
 }

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

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

视图将是这样的：

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

另请查看this example的代码。

Answer 3

你可以用vue-resource做到这一点。将vue-resource.js包含到您的应用或html文件中，并且：

    {
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}

Vue JS - 将Json放在数据上

3 个答案: