如何将Microsoft SQL Server Client for Node.js响应数据绑定到Vue.js数据对象

Question

I'm using Microsoft SQL Server client for Node.js ( https://www.npmjs.com/package/mssql ) to fetch data from my SQL server

Here is my client-side code

var demo = new Vue({
        el: '#demo',
        data: {
            searchQuery: '',
            gridColumns: ['Source', 'SourceNo', 'TaskType'],
            gridData: []
        },
        mounted: function () {
            this.loadData();
        },
        methods: {
            loadData: function () {
                var ip = location.host;
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: 'http://' + ip + '/sql',
                    data: {
                    },
                    success: function (responseData) {
                        this.gridData = responseData.recordsets;
                        console.log(this.gridData);
                    },
                    error: function (error) {
                        console.log('error', error);
                    }
                })
            }
        }
    })

Here is the responseData from my server

Unfortunately, I don't get what object should I bind to this.gridData

Answer 1

In your success callback, this no longer represents the Vue instance so you're not actually setting your observable gridData .

Grab a reference to the current instance and use it inside your callback:

var self = this;
$.ajax(...)
    success: function(responseData) {
        self.gridData = ...
    ...
    }