data change doesn't reflect in vue application

Question

In my Vue application I am trying to create a simple table with changeable column sequence. In the data structure I keep all column data with its thead. I use compute to calculate rows from column data using matrix transposion. However any change I do to dynamicTable.columns doesn't reflect in the view.

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

For example I want to change the order of isbn column with price,

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

data changes but changes are not reflected. What is the problem here?

tony19 · Accepted Answer · 2022-07-16 02:51:12Z

1

As mentioned in the documentation, this is a JavaScript limitation. Direct changes to an array are not detected by Vue.

One workaround for this, is to use Vue.set(), as instructed in the link.

edited Jul 16, 2022 at 2:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 2, 2018 at 22:18

Aamir Khan

3,0312 gold badges27 silver badges35 bronze badges

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

2 Comments

zenprogrammer Over a year ago

I found same answer here as well: vuejs.org/2016/02/06/common-gotchas Using arr.splice(index, 1, value) solved my problem.

Aamir Khan Over a year ago

Cool! I was stuck on the same problem a few days ago was a amused because console.log() would show the updated data but the DOM wasn't being updated.

Collectives™ on Stack Overflow

data change doesn't reflect in vue application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related