Vue.js设置数组

Question

如果我将fun f:: 'a => 'a list := ..... Ltac apply_R := match goal with | |- ( ... H ...) => let L := eval cbv in f(H) in match L with | nil => apply R; simpl; intuition | _ => idtac end end. 设置为Vue.data数组 我将进入[0: Object, 2: Object];这样的Vue控制台日志面板数组 在[0: Object, 1: undefined 2: Object];中迭代后，我遇到了获取未定义属性的问题。

我这样解决了我的问题：

'v-for="cell in row.cells"'

我想进入Vue数组，因为我尝试设置时不进行索引移位或任何数组更改。

Answer 1

如果坚持使用命名值，Vue可以像迭代数组一样重复对象，为什么不这样做：

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

如果数组中有不需要的“数据”，则可以说以下内容。

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

，然后迭代 filteredCells ，而是使filteredCells成为计算值。

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