Question

在我的Vue应用程序中，我试图创建一个具有可变列序列的简单表。在数据结构中，我保留所有列数据及其thead。我使用compute来使用矩阵转置从列数据计算行。但是，我对dynamicTable.columns所做的任何更改都不会反映在视图中。

function transpose(a)
{
  return a[0].map(function (_, c) { return a.map(function (r) { return r[c]; }); });
  // or in more modern dialect
  // return a[0].map((_, c) => a.map(r => r[c]));
}

var tData = {
    columns:[
    {thead:'isbn',
    tdata:[1,2]},
    {thead:'name',
    tdata:['rose','flower']},
    {thead:'price',
    tdata:['10','15']},
    {thead:'author',
    tdata:['john','jane']},
    {thead:'page count',
    tdata:['396','149']},
    {thead:'print date',
    tdata:['2001', '1996']}
    ]
}

var dynamicTable = new Vue({
  el: '#dynamicTable',
  data: tData,
    computed:{
        rows: function(){
            arr = [];
            this.columns.forEach(function(element){
                arr.push(element.tdata);
            });
            return transpose(arr)
        }
    }
})

例如，我想用价格

更改isbn列的顺序

a=dynamicTable.columns[0]
b=dynamicTable.columns[2]
dynamicTable.columns[0]=b
dynamicTable.columns[1]=a

数据更改但未反映更改。这有什么问题？

Answer 1

As mentioned in the documentation，这是JavaScript限制。 Vue未检测到对阵列的直接更改。

解决此问题的一种方法是按照链接中的说明使用Vue.set（）。

数据更改并未反映在vue应用程序中

1 个答案: