Vue.js2呈現空陣列

Question

我在我的laravel項目中使用了vue.js。問題是vue.js渲染了空數組，儘管我發現變長名稱有一些數據。

我使用的是laravel 5.4和vue.js2。對於jsonp get方法，我正在使用vue-resource

另外，如果我想在模板中看到包含數據{{names}}的變量，它只是添加一個空數組。在這兩種情況下都沒有錯誤日誌。

template.vue

<template> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div class="panel panel-default"> 
        <div class="panel-body"> 
        {{names}} 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

的js

<script> 
    export default { 
     data: function(){ 
      return { 
       names: [] 
      }; 

     }, 
     methods: { 
     getData: function(){ 
      var self = this; 
       // GET request 
      this.$http.jsonp(url, {jsonpCallback: "JSON_CALLBACK"}) 
      .then(response=>{ 
       return response.body;    
      }) 
      .then(data =>{ 
       self.names = data 
       console.log(JSON.stringify(self.names))// logs the data 
      }) 
     } 
     }, 
     mounted() { 
      this.getData() 

      console.log('Component mounted.') 
     } 
    } 
</script> 

blade.php

<search id='search'> 
</search> 

JSON響應看起來像這樣

[ 
    { 
     "uri":"http://en.wikipedia.org/wiki/Samsung", 
     "id":"24366", 
     "type":"org", 
     "score":527013, 
     "label":{ 
     "eng":"Samsung" 
     } 
    }, 
    { 
     "uri":"http://en.wikipedia.org/wiki/Samsung_Electronics", 
     "id":"30860", 
     "type":"org", 
     "score":135216, 
     "label":{ 
     "eng":"Samsung Electronics" 
     } 
    } 
] 

VUE開發工具顯示變量

Answer 1

我能解決這個問題，我不太知道爲什麼，但這個問題是因爲我發起了我的部分，因爲這

Vue.component('search', require('./components/Searchnames.vue')); 

const search = new Vue({ 
    el: '#search' 
}); 

然後在不同的文件我通過導出默認引用數據和方法函數，這就引起了這個問題，刪除了

const search = new Vue({ 
    el: '#search' 
}); 

解決了這個問題。不知道爲什麼，雖然，

Answer 2

我不知道這是否會幫助，但我把你的代碼彙集成一個可運行的代碼片斷，它按預期工作。很明顯，我替換了你的數據請求。

聽起來好像self在某種程度上不是您在完成作業時所認爲的。不過，我不知道會如何發生。

new Vue({ 
 
    el: '#search', 
 
    components: { 
 
    search: { 
 
     data: function() { 
 
     return { 
 
      names: [] 
 
     }; 
 

 
     }, 
 
     methods: { 
 
     getData: function() { 
 
      const self = this; 
 

 
      setTimeout(function() { 
 
      self.names = [{ 
 
       "uri": "http://en.wikipedia.org/wiki/Samsung", 
 
       "id": "24366", 
 
       "type": "org", 
 
       "score": 527013, 
 
       "label": { 
 
        "eng": "Samsung" 
 
       } 
 
       }, 
 
       { 
 
       "uri": "http://en.wikipedia.org/wiki/Samsung_Electronics", 
 
       "id": "30860", 
 
       "type": "org", 
 
       "score": 135216, 
 
       "label": { 
 
        "eng": "Samsung Electronics" 
 
       } 
 
       } 
 
      ]; 
 
      }, 0); 
 

 
     } 
 
     }, 
 
     mounted() { 
 
     this.getData() 
 

 
     console.log('Component mounted. names is', this.names); 
 
     } 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<search id='search' inline-template> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-2"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-body"> 
 
      {{names}} 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</search>