关于vue数据传递

Question

各位大神帮忙看一下， 也是搞得挺久了。
我公司做一些简单的点菜页面，所以我就准备用传说小巧灵活的框架——vue。
先声明一下，因为页面很小，所以就不想引用webpack这种组件管理工具，vue-cli也不想用，确实也不会用。
只是想用一下vue的传递数据，渲染组件，拼字符串感觉太原始。路由也不需要。

言归正传：
这里就是用ajax取后端数据，然后放到构造器的data中，结果，出了$.ajax函数数据就取不到。
各位大神，帮忙看一下，这里究竟该怎么写？

感激不尽！

Answer 1

谁告诉你这么获取数据的???
在ready或者creat里获取数据, 然后赋给data

{
    data: {
        id: '',
        title: '',
        category: '',
        content: ''
    },
    ready() {
        var request = $.ajax({
            type: "POST",
            dataType: 'json',
            url: "api.php"
        });
        request.then((json) => {
            this.id = json.data.id
            this.title = json.data.title
            this.category = json.data.category
            this.content = json.data.content
        });
    }
}

Answer 2

你给 ajax 设置了异步，你要知道代码的执行速度是要比网络请求快很多的。从输出也可以看出先执行了 14 行，然后才是 11 行。所以最后 return 的也是 undefind。

最简单的办法，就是设置为同步，async: false。
既然使用了 vue，可以把 jq 去掉的，ajax 用 vue-resource。

Answer 3

你的问题在于同步，异步操作搞混了，这么改改

data: function(){
    var _this =  this;
    $.ajax({
         ....
         success: function(callback){
              _this.$set('callback', callback);
         }
    });

    return {};
}

纯手机手打，累的要死，这个应该能用。但取数据的位置不推荐，应该写到create或者ready里去

Answer 4

其实除了1楼办法 也可以用watch