Vue.js2 rendert leeres Array

Question

Ich verwende vue.js in meinem Laravel-Projekt. Das Problem ist, dass vue.js ein leeres Array darstellt, obwohl ich sehe, dass die variablen Namen einige Daten haben.

Ich benutze Laravel 5.4 und vue.js2. Für die jsonp get Methode verwende ich Vue-Ressource

Auch wenn ich meine Variable mit Daten {{names}} in der Vorlage sehen möchte, fügt es einfach ein leeres Array. In beiden Fällen gibt es keine Fehlerprotokolle.

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> 

der JSON-Antwort wie folgt aussieht

[ 
    { 
     "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 Entwickler-Tools zeigen die Variable

Answer 1

Ich konnte das Problem lösen, ich bin nicht ganz sicher, warum, aber das Problem war, weil ich meine Komponente, da diese in einem anderen

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

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

dann

eingeleitet hatte Datei, die ich referenzierte Daten und Methodenfunktionen über Export-Standard, führte dazu, dass das Problem,

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

löst das Problem. nicht sicher, warum das aber ist,

Answer 2

Ich weiß nicht, ob dies helfen wird, aber ich habe den Code zusammen in ein lauffähiges Schnipsel, und es funktioniert wie erwartet. Offensichtlich habe ich Ihre Datenanfrage ersetzt.

Es klingt wie self ist irgendwie nicht das, was Sie denken, es ist, wenn Sie die Aufgabe erledigen. Ich weiß nicht, wie das passieren würde.

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>