Vue JS - 将 Json 放在数据上

Posted 2023-02-22

【中文标题】Vue JS - 将 Json 放在数据上

【英文标题】：Vue JS - Putting Json on data

【发布时间】：2015-03-01 09:29:13

【问题描述】：

我想把我的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>  

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

【参考方案1】：

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

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

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

  , response => 
    // error callback
  );

【参考方案2】：

this 指的是整个 Vue 对象，因此 musics 对象已经可以通过 this.musics 访问。更多信息 here 在 VueJS API 参考和 here 在 VueJS 指南，更多信息在 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的代码。

【讨论】：

我不认为编译应该在方法中。

【参考方案3】：

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

来自 VueJs 指南：

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