首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >数据更改不会反映在vue应用程序中

数据更改不会反映在vue应用程序中
EN

Stack Overflow用户
提问于 2018-06-03 05:59:48
回答 1查看 397关注 0票数 1

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

代码语言:javascript
复制
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列的顺序,

代码语言:javascript
复制
a=dynamicTable.columns[0]
b=dynamicTable.columns[2]
dynamicTable.columns[0]=b
dynamicTable.columns[1]=a

数据更改,但更改不会反映出来。这里的问题是什么?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-03 06:18:17

As mentioned in the documentation,这是JavaScript限制。Vue不会检测到对数组的直接更改。

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50661508

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档