Vuejs verschachtelte Listen mit AJAX gezogen

Question

Ich versuche, aus JSFiddle, diese vuejs verschachtelte Liste Beispiel zu erstellen, aber mit dem Zusatz von AJAX: https://jsfiddle.net/928ao037/

Ich habe meine PHP

$todos = array(
    'todos' => array(
     array(
      'text' => 'Learn JS', 
      'subTodos' => array(
       array('text'=>'linting'), 
       array('text'=>'bundling'), 
       array('text'=>'testing'), 
      ) 
     ), 
     array(
      'text' => 'Learn Vue', 
      'subTodos' => array(
       array('text'=>'Components'), 
       array('text'=>'Virtual DOM'), 
       array('text'=>'Templating'), 
      ) 
     ), 
     array(
      'text' => 'Build something awesome', 
      'subTodos' => array(
       array('text'=>'Build'), 
       array('text'=>'Something'), 
       array('text'=>'Awesome'), 
      ) 
     ), 
    ) 
); 

echo json_encode($todos); 

und meine JS/HTML:

var apiURL = '../wp-admin/admin-ajax.php?action=my_pull_facilities_and_apps'; 
 

 
Vue.component('todo-item', { 
 
    template: '<li>{{subtodo.text}}</li>', 
 
    props: ['subtodo'] 
 
}); 
 

 
var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
\t todos: '', 
 
    }, 
 
    methods: { 
 
    start: function() { 
 
\t var self = this 
 
\t var xhr = new XMLHttpRequest() 
 
\t self.unloaded = true; 
 
     xhr.open('GET', apiURL) 
 
     xhr.onload = function() { 
 
     self.todos = JSON.parse(xhr.responseText); 
 
     } 
 
     xhr.send() 
 
    } 
 
    } 
 
}); 
 

 
app.start();

<div id="app"> 
 
\t \t <ul> 
 
\t \t \t <li v-for="todo in todos"> 
 
\t \t \t {{ todo.text }} 
 
\t \t \t <ul> 
 
\t \t \t \t <todo-item v-for="subtodo in todo.subTodos" v-bind:subtodo="subtodo"></todo-item> 
 
\t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div>

Die geparsten JSON kommt zurück in wie folgt aus: todos output

Ich habe versucht, direkt in app.todos das Array aus dem jsfiddle vorbei und es funktioniert, so dass ich glaube, dass meine Komponente richtig eingestellt ist. Wenn der AJAX ihn einzieht, sieht es so aus, als wäre alles da, aber der Datentyp ist: 'Objekt {ob: Beobachter}'. Ich bin mir nicht sicher, wie man es analysiert oder was ich falsch mache.

Answer 1

Ich fand es heraus, ich musste nur JSON parsen die Antwort.todos nicht nur die Antwort. Ich entschied mich, jQuery für meine json get-Funktion zu verwenden, aber ich bezweifle, dass das etwas damit zu tun hatte.

  var app = new Vue({ 
       el: '#app', 
       data: { 
        todos: '', 
       }, 
       methods: { 
       start: function() { 
        var self = this 
        jQuery.getJSON(apiURL, function(result){ 
         self.todos = result.todos; 
        }); 
       } 
       } 
      });