正在删除组合API中的数组项

Question

我正在尝试学习组合API，并随着vue3似乎正在向它移动而远离选项API。我正在做一个简单的例子，用户在输入框中输入股票代码，然后在旁边的输入框中输入股票数量。当你点击关闭时，它会将其添加到仓位数组中。然而，我正试图将输入框上的清除事件联系起来，如果单击清除按钮，Quasar就会触发一个清除事件。我正在运行一个函数deletePosition来删除该行，它应该更新数组并删除该行。然而，我的问题是，这会删除数组中除"AAPL"股票的0索引之外的所有项目。不管我加了多少个职位，它仍然会做出这种不同寻常的行为。我不知道为什么这种情况一直在发生，这让我想知道我应该不使用裁判，应该使用反应，还是我只是错过了一些明显的东西？

<template>
<q-page class="flex flex-center">
<form id="upload-stocks-form" class="q-pa-xl" method="post">
<h1 class="text-h4 text-center">Add Positions</h1>
<div class="row q-col-gutter-md">
<template v-for="(item,index) in positionsArray" :key=index>
<div class="col-9">
<q-input class="login-textbox grey-7" filled v-model="item.StockSymbol" @clear="deletePosition(index)" label="Stock Symbol" clearable>
</q-input>
</div>
<div class="col-3">
<q-input class="login-textbox grey-7" filled v-model.number="item.ShareCount" type="number" label="Shares">
</q-input>
</div>
</template>
<div class="col-9">
<q-input class="login-textbox grey-7" filled v-model="addStockSymbol" label="Add New Stock Symbol" @blur="addPosition">
</q-input>
</div>
<div class="col-3">
<q-input class="login-textbox grey-7" filled v-model.number="addShareCount" type="number" label="Shares" @blur="addPosition">
</q-input>
</div>
<div class="col-12">
<q-btn class="full-width q-pa-md q-mt-md" color="orange-8" label="Save" />
</div>
</div>
</form>
</q-page>
</template>
<script>
import {watch, ref, defineComponent} from 'vue'
export default defineComponent({
name: 'UploadPositions',
components: {

},
setup () {
//v-models
const addStockSymbol = ref('')
const addShareCount = ref('')
const positionsArray = ref([{StockSymbol: 'AAPL', ShareCount: 4 },{StockSymbol: 'AMD', ShareCount: 10 }])
//methods
const addPosition = () => { 
if((addStockSymbol.value != null && addStockSymbol.value != '') && (addShareCount.value != null && addShareCount.value != '')){
positionsArray.value.push({StockSymbol: addStockSymbol.value.toUpperCase(), ShareCount: addShareCount.value})
addStockSymbol.value = null
addShareCount.value = null
console.log(positionsArray.value)
}
}
const deletePosition = (index) => {
positionsArray.value =  positionsArray.value.splice(index,1)
console.log(positionsArray.value)
}
return {
addStockSymbol, addShareCount, positionsArray, addPosition, deletePosition
}
}
})
</script>

Answer 1

splice将返回已删除的项，因此positionsArray将仅为已删除项。

您只需要重新分配positionsArray

const deletePosition = (index) => {
positionsArray.value.splice(index,1)
}