23 July 2020

Removing array element from vue property caused a tricky anomaly for me. I was trying different methods delete didn't work, splice worked but always removed the last item from array. Finally I managed to find the right way to do it. The problem has to do with how vue manages properties/states. So this example shows how to avoid .splice() always removing the last item in Vue.

Source code viewer
  1. <tr v-for="(row, index) in rows" :key="expense">
  2.   <td></td>
  3.   <td></td>
  4.   <td></td>
  5.   <td class="has-text-right"><b-button type="is-danger" icon-right="delete" @click="RemoveRow(index)" /></td>
  6. </tr>
  7.  
  8. <script lang="ts">
  9. export default class NewClaimForm extends Vue {
  10.   protected RemoveRow(index: number) {
  11.     this.expenses.splice(index, 1);
  12.   }
  13. }
  14. </script>
Programming Language: ECMAScript