Vue array not Updating

Question

I have a jquery click function on a table row that takes the value of the table row and puts it into a list i then set the list equal to the vue array i have here are the arrays. Array:

 tableRow: [
                {
                    "name": "1",
                    "numSongs": "2",
                    "Year": "3"
                }
            ]

Function:

    $("#table1 tr").click(function () {
        var list = [];

        var $row = $(this).closest("tr"),
            $tds = $row.find("td");

        list.push({ name: $tds.eq(0).text(), numSongs: $tds.eq(1).text(), Year: $tds.eq(2).text() });
        this.tableRow =  list;
        console.log(this.tableRow);
    });

I also log the value of the list when the app loads and when i click it and it does change.

Then i have a function to test if the values have changed just a simple alert function.

greet: function () {
            // `this` inside methods points to the Vue instance
            alert('Hello ' + this.tableRow[0].name )
        },

But the value doesn't update in the function does anyone know why.

Vue Instance Code

export default {

    data() {
        return {
            tableRow: [
                {
                    "name": "1",
                    "numSongs": "2",
                    "Year": "3"
                }
            ]
        }
    },
    mounted: function () {
        console.log(this.tableRow);
        this.$nextTick(() => {
            $("#table1 tr").click(function () {
                var list = [];

                var $row = $(this).closest("tr"),
                    $tds = $row.find("td");

                list.push({ name: $tds.eq(0).text(), numSongs: $tds.eq(1).text(), Year: $tds.eq(2).text() });
                this.tableRow =  list;
                console.log(this.tableRow);
            });
        });
    },

    methods: {
        greet: function () {
            // `this` inside methods points to the Vue instance
            alert('Hello ' + this.tableRow[0].name )
        },
}
}

Can you show the vue instance code

Vamsi Krishna
– Vamsi Krishna

2017-06-29 10:47:18 +00:00
Commented Jun 29, 2017 at 10:47 — Vamsi Krishna
– Vamsi Krishna, Commented Jun 29, 2017 at 10:47
I've added it to the question just now.

DanielM96
– DanielM96

2017-06-29 10:51:30 +00:00
Commented Jun 29, 2017 at 10:51 — DanielM96
– DanielM96, Commented Jun 29, 2017 at 10:51

Vamsi Krishna · Accepted Answer · 2017-06-29 11:05:00Z

3

This is due to the scoping issue of this

In your click handler you are doing this.tableRow = list where tableRow is a property of data option in the vue instance but this is not pointing to the vue instance, it refers to element which invoked the event

So do it like this:

mounted: function () {
    var self = this;
    console.log(this.tableRow);
    this.$nextTick(() => {
        $("#table1 tr").click(function () {
            var list = [];

            var $row = $(this).closest("tr"),
                $tds = $row.find("td");

                list.push({ name: $tds.eq(0).text(), numSongs: $tds.eq(1).text(), Year: $tds.eq(2).text() });
                self.tableRow =  list;
                console.log(this.tableRow);
        });
    });
},

edited Jun 29, 2017 at 11:05

answered Jun 29, 2017 at 11:00

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

1 Comment

Vamsi Krishna Over a year ago

@DanielM96 happy to help :)

Collectives™ on Stack Overflow

Vue array not Updating

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related