Question

我在表行上有一个jquery点击函数，它接受表行的值并将其放入列表中然后将列表设置为等于我在这里的数组的数组。阵列：

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

功能：

    $("#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);
    });

我还会在应用加载时记录列表的值，当我点击它时它会发生变化。

然后我有一个函数来测试值是否只是改变了一个简单的警报函数。

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

但是这个函数中的值没有更新，任何人都知道原因。

Vue实例代码

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

Answer 1

这是由于ConsoleConnector

的范围问题

在您的点击处理程序中，您正在执行this，其中this.tableRow = list是vue实例中数据选项的属性，但 tableRow 未指向到vue实例，它指的是调用事件的元素

所以这样做：

this

Vue数组没有更新

1 个答案: