我有一个简单的应用程序,其中用户选择从下拉列表中的值,并且当他们点击“添加”按钮值和它的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首先填充它们?
答案 0 :(得分: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)
答案 1 :(得分:0)
数组始终是连续的;数组中的所有“孔”都将填充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
}
}