遇到这个问题我也是很懵b!

先来看一下我的代码

var app = new Vue({
	el: '#app',
	data: {
        stationeryList: [],
    },
    methods: {
    checkLogin() {
        $.ajax({
            url: 'checkLogin',
            type: 'post',
            data: '',
            dataType: 'json',
            success: function (data, status) {
                if (data.ok !== 1) {
                    return;
                }

                // 登录成功后
                // 1. 设置用户名
                app.name = data.name;
                // 2. 获取菜品列表
                app.getStationeryList();
            }
        });
    },
    	getStationeryList() {
            $.ajax({
                url: 'getStationeryList',
                type: 'post',
                content: this,
                data: '',
                success: function (data) {
                    app.stationeryList = data;
                }
            })
        },
    }
});

我在调用这个getStationeryList()方法的时候发现,前端可以接收到数据,但是在前端不显示。

最终通过查阅资料发现,我们不能直接在ajax中直接使用this.stationeryList = data;因为此时的this是ajax,不是vue,我们需要通过app.stationeryList = JSON.parse(data);来赋值,不然这个值显示不出来。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐