Question

我正在尝试从JSFiddle重新创建这个vuejs嵌套列表示例，但添加了AJAX：https://jsfiddle.net/928ao037/

我有我的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.component('todo-item', {
  template: '<li>{{subtodo.text}}</li>',
  props: ['subtodo']
});

var app = new Vue({
  el: '#app',
  data: {
	  todos: '',
  },
  methods: {
    start: function () {
	  var self = this
	  var xhr = new XMLHttpRequest()
	  self.unloaded = true;
      xhr.open('GET', apiURL)
      xhr.onload = function () {
        self.todos = JSON.parse(xhr.responseText);
      }
      xhr.send()
    }
  }
});

app.start();

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

解析后的JSON会像这样重新出现： todos output

我已经尝试将数组从jsfiddle直接传递到app.todos并且它可以工作，所以我相信我的组件设置正确。当AJAX将其拉入时，看起来一切都在那里，但数据类型为：'Object { ob ：Observer}'。我不确定如何解析它或我做错了什么。

Answer 1

我想通了，我只需要JSON解析response.todos而不仅仅是响应。我决定将jquery用于我的json get函数，但我怀疑它与它有什么关系。

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

Vuejs使用AJAX拉取嵌套列表

1 个答案: