Vuejs setting an array

Question

If I set to Vue.data array like this [0: Object, 2: Object]; I will get in Vue console log panel array like this [0: Object, 1: undefined 2: Object]; and after iteration in 'v-for="cell in row.cells"' I got the problem of getting any property of undefined.

I resolved my problem like this:

v-for="cell in row.cells" v-bind:colspan="cell.colspan" v-if="typeof cell !== 'undefined'"



v-for="cell in row.cells" v-bind:colspan="cell.colspan" v-if="typeof cell !== 'undefined'"

I want to get in Vue array as I've tried to set without index shift or any array changings.

Abarth · Accepted Answer · 2019-05-03 12:14:26Z

3

Vue can iterate Objects the same as they do Arrays, if you insist on named values why not do this:

cells: {
  0: {},
  1: {},
  2: {}
}

If you got unwanted "data" in your array, you could say the following.

const filteredCells = row.cells.filter(cell => cell !== undefined)

and then iterate the filteredCells instead, id make filteredCells a computed value.

v-for="cell in filteredCells"

Keep index:

export default {
  data() {
    return {
      row: {
        cells: [
          {name: 'peter'}, 
          {name: 'louise'}, 
          {name: 'hans'}, 
          undefined, 
          {name: 'mia'}, 
          {name: 'john'}
        ]
      }
    }
  },

  computed: {
    filteredCellsWithIndex() {
      if (!this.row || !this.row.cells) {
        return
      }

      const { cells } = this.row

      return cells.map((cell, index) => {
        if (cell === undefined) {
          return
        }

        cell.yourIndex = index
        return cell
       }).filter(cell => cell !== undefined)
    }
  }
}

edited May 3, 2019 at 12:14

answered May 3, 2019 at 11:19

Abarth

1761 silver badge11 bronze badges

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

2 Comments

Виктор Васильев Over a year ago

But after filter array you will kill indexes [0 => 1, 1 => undefined , 2 => 2] => [0 => 1, 1 => 2] I want to save my indexes

Abarth Over a year ago

Run through the array, add the index to the object, then chain filter() afterwards, to remove undefined, and then delete your v-if on iteration.

Steven Spungin · Accepted Answer · 2019-05-03 12:28:41Z

0

There are a couple of ways to cleanly remove your undefined values without making your template overly complicated.

Create a filter.

v-for="cell in row.cells | isDefined"

{
  filters: {
    isDefined(items) {
      return items.filter(it => it !== undefined)
    }
  }
}

Or use a computed property.

v-for="cell in cells"

{
  computed: {
    cells() {
      return this.row.cells.filter(it => it !== undefined)
    }
  }
}

answered May 3, 2019 at 12:28

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

3 Comments

Abarth Over a year ago

The wish to keep index values for each property as they were in the original array, doesen't get solved with this.

Steven Spungin Over a year ago

If OP NEEDED index values, the template would use for (cell,index) in ... OP can simply use indexOf(cell) to get index if needed.

Abarth Over a year ago

No, ['a', 'b', undefined, 'd'], he still wants 'd' to be of index 3, your solution (as I suggested as well at first) will make 'd' using (cell, index) to index 2.

Collectives™ on Stack Overflow

Vuejs setting an array

2 Answers 2

2 Comments

Create a filter.

Or use a computed property.

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Create a filter.

Or use a computed property.

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related