[Vuejs]-Vue array not Updating

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);
        });
    });
}, 

Leave a comment