Vuejs, устанавливающий массив

Question

Если я установлю массив Vue.data, как это [0: Object, 2: Object]; Я получу в массиве панели журнала консоли Vue, как это [0: Object, 1: undefined 2: Object]; и после итерации в 'v-for="cell in row.cells"' у меня возникла проблема получения любого свойства undefined.

Я решил свою проблему следующим образом:

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'"

Я хочу получить массив Vue, поскольку я пытался установить его без изменения индекса или каких-либо изменений массива.

Answer 1

Vue может повторять объекты так же, как и массивы, если вы настаиваете на именованных значениях, почему бы не сделать это:

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

Если вы получили нежелательные «данные» в своем массиве, вы можете сказать следующее.

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

, а затем итерация FilterCells вместо этого, id делает FilterCells вычисленным значением.

v-for="cell in filteredCells"

Индекс ведения:

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

Answer 2

Существует несколько способов аккуратно удалить неопределенные значения, не усложняя шаблон.

Создать фильтр.

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

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

Или используйте вычисляемое свойство.

v-for="cell in cells"

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