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?

Mai Anh Kha · Accepted Answer · 2018-03-13 07:14:12Z

3

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

answered Mar 13, 2018 at 7:14

Mai Anh Kha

461 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Call vuejs component's method in jquery closure

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related