Call vuejs component's method in jquery closure

Question

Here is my vuejs component:

<script>
export default {
    props: ['columns', 'records', 'group', 'users'],
    data: function () {
        return {
            new_record: true,
            myrecords: this.records
        }
    },
    methods: {
        addRow: function () {
            try {
                console.log(this.myrecords);
                this.myrecords.push({});
                console.log(this.myrecords);
            } catch (e) {
                console.log(e);
            }
        },
        saveRow: function () {
            $.post("http://localhost/someurl", { somedata: somevalue })
                .done(function (data) {
                    console.log(data);
                    this.addRow();
                })
                .fail(function (error) {
                    console.log(error);
                    alert("error");
                });
...
...

Error: app.js:155 Uncaught TypeError: this.addRow is not a function

I understood why this happens, because this in current context is jquery object,

but question is how do I call addRow method of my vue component?

Answer 1

You need add let self = this before call ajax. Then, you can call self.AddRow()