Question

我有一个简单的应用程序，其中用户选择从下拉列表中的值，并且当他们点击“添加”按钮值和它的ID应被填充到使用id作为索引的阵列。

示例：

值

1-苹果
3-香蕉 8-梨

用户选择每个水果，在每个选择之后单击添加。我的数组应如下所示：

 [
    1: Apple,
    3: Bananas,
    8: Pears
 ]

但是我最终在Vue中得到的是：

[
    1: Apple,
    2: undefined,
    3: Bananas,
    4: undefined,
    5: undefined,
    6: undefined,
    7: undefined,
    8: Pears
]

这些值作为输入传递给服务器验证，显然这在数组长度和验证规则方面造成了问题。我该如何删除这些未定义的值或阻止Vue首先填充它们？

Answer 1

Vue不会在阵列中插入undefined。这只是JavaScript数组（即sparse arrays）的行为。

获取新的已定义元素数组的快速解决方案是使用Array.prototype.filter：

const input = [
  'Apple',
  undefined,
  'Bananas',
  undefined,
  undefined,
  undefined,
  undefined,
  'Pears'
];
const output = input.filter(x => x); // filter out undefined elements
console.log(output)

Answer 2

数组始终是连续的；数组中的所有“孔”都将填充undefined。

您要使用的是一个对象：

{
  data() {
    return {
      items: {}
    }
  },

  methods: {
    add(id, item) {
      // Vue cannot detect property additions, so we must use
      // this method to do so
      this.$set(this.items, id, item)
    }
  }
}

如果使用v-for在模板中渲染此对象的项目，则顺序通常与将每个项目添加到对象的顺序相同（请参见v-for with an Object）。如果您需要按ID顺序显示项目，则需要对项目进行排序：

<div v-for="item of itemsArray">{{ item }}</div>

computed: {
  itemsArray() {
    return Object.entries(this.items)
      .sort((a, b) => a[0] - b[0])  // sort entry key (ID)
      .map(a => a[1])  // take entry value
  }
}

添加非连续的索引到一个数组时Vue的不断增加未定义的值？

2 个答案: