Deleting an array item in Composition API

I am trying to learn composition API and move away from options api as vue3 seems to be moving towards it. I am doing a simple example where a user enters in an input box the ticker and then the number of shares in the input box next to it. When you click off it adds it to the array of positions. However, I am trying to tie into the clear event on the input boxes and if you click the clear button then Quasar has a clear event it triggers. I am running a function deletePosition to delete that row which should update the array and delete that row. My issue however is this deletes all items in the array except the 0 index which is ‘AAPL’ stock. It does not matter how many positions I add it still does this unusual behavior. I am not sure why this keeps happening and its making me wonder should I not be using ref and should be using reactive or am I just missing something obvious?

<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

splice will return the deleted item, so the positionsArray will be the deleted items only.

You just don’t need to re-assign positionsArray

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

Advertisement

Answer