component status is not updated vue-js

Question

im new in vuejs, i have a component which is a custom table that receives a props,this is an array with all the data in order that table consume and show the data. The main problem is that i got the logic to sort the field in the asc/desc table therefore when i click in one of the header the table invoke the next method

order(columnIndex: number) {
      const thisRef = this
      const arr = this.currentOrder;
      let sortedArray = this.rows
        .map((row, rowNumber) => ({
          row: row,
          rowNumber: rowNumber
        }))
        .sort((a, b): number => {
          const cellNumberA =
            thisRef.subcolumnsLabels.length * a.rowNumber + columnIndex
          const cellNumberB =
            thisRef.subcolumnsLabels.length * b.rowNumber + columnIndex
          const cellValueA = thisRef.getCellValue(cellNumberA)
          const cellValueB = thisRef.getCellValue(cellNumberB)
          return cellValueA - cellValueB
          if(arr[columnIndex]){
               arr[columnIndex] = false;
               return cellValueB - cellValueA
             }else{
               arr[columnIndex] = true;
             }
        }).map((rowWithRowNumber) => rowWithRowNumber.row)
      this.$store.dispatch('market/setSiData',sortedArray)
    },

This method receives one columnIndex this is the number of column in which has been click, the same one is worth for ask the position of the array and check if is true or false.

data() {
    return {
      columsOrder: [false,false,false,false,false,false,false],
    }
  },

The problem is a few times this works, change for true and sometimes no, i have no idea why that is happen. Any thoughts ?

tony19 · Accepted Answer · 2022-07-16 02:42:02Z

1

Please read Change Detection Caveats - For Arrays:

Vue cannot detect the following changes to an array:

When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue

When you modify the length of the array, e.g. vm.items.length = newLength

You are doing (1) here:

arr[columnIndex] = false

You should use this.$set instead:

this.$set(arr, columnIndex, false)

edited Jul 16, 2022 at 2:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 9, 2022 at 5:59

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

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

1 Comment

loverotaku Over a year ago

I get the same result .. sometimes updates and sometimes not

Collectives™ on Stack Overflow

component status is not updated vue-js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related