删除组合API中的数组项

Question

我正在尝试学习复合API，并从options中移开，因为vue3似乎正在向它迈进。我正在做一个简单的例子，在这个例子中，用户输入一个输入框、一个滴答，然后输入它旁边的输入框中的共享数。单击关闭时，它会将其添加到位置数组中。但是，我试图绑定到输入框上的clear事件，如果您单击clear按钮，那么类星体就会触发一个清除事件。我正在运行一个函数deletePosition来删除该行，它应该更新数组并删除该行。不过，我的问题是，这将删除数组中的所有项，但0索引除外，它是'AAPL‘股票。不管我加多少个职位，它仍然会做这种不寻常的行为。我不知道为什么会这样，这让我想知道我是不是应该使用裁判，应该使用反应性，还是我只是遗漏了一些显而易见的东西？

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