vuejs和后台交互问题？

Question

vuejs和后台交互问题：比如下面这个示例，

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


new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})

如果data中的todos是从后台取出来的，应该怎么替换，语法怎么写呢？(后台用的laravel)

Answer 1

如果配合vue-resource的话，可以这么写

new Vue({
    el: '#app',
    data: {
        todos: [  ] 
    },
    created: function() {
        this
            .$http
            .get('你的api')
            .then((data) => {
                this.todos = data;
            })
    }
});

如果配合jquery的ajax，可以这样:

new Vue({
    el: '#app',
    data: {
        todos: [  ] 
    },
    created: function() {
        $.get('你的api')
          .done((data) => {
                this.todos = data;
          });
    }
});

这里只要"你的api"返回的是todos数组就好了

至于后端怎么写，仅仅返回一个json数据，技术上应该不难吧！

Answer 2

vue-resource，语法自己看demo

Answer 3

前后分离异步数据