Json 使用AJAX拉取Vuejs嵌套列表

我试图从JSFIDLE中重新创建这个vuejs嵌套列表示例，但添加了AJAX：

我有我的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);

和我的JS/HTML：

var apiURL='../wp admin/admin ajax.php？action=my_pull_facilities_and_apps'；
Vue.组件（'待办事项'{
模板：“
{{subtodo.text}
”，
道具：['subtodo']
});
var app=新的Vue({
el:“#应用程序”，
数据：{
待办事项：''，
},
方法：{
开始：函数（）{
var self=这个
var xhr=newXMLHttpRequest（）
self.unload=true；
xhr.open（'GET'，apirl）
xhr.onload=函数（）{
self.todos=JSON.parse（xhr.responseText）；
}
xhr.send（）
}
}
});
app.start（）



{{todo.text}}




我明白了，我只需要JSON解析响应。todos不仅仅是响应。我决定在json get函数中也使用jquery，但我怀疑这和它有什么关系

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

我应该补充的是，上面PHP的输出是：{“todos”：[{“text”：“Learn JS”，“subtomos”：[{“text”：“linting”}，{“text”：“bundling”}，{“text”：“testing”}，{“text”：“Learn Vue”，“subtomos”：[{“text”：“Components”}，{“text”：“Virtual DOM”}，{“Templating”}，{“text”：“Build something”；“something subtomos”[{“text”：“text”}，{“太棒了”}]}]}