Why does it always remove the last element?

Question

Vue.js

Hello!

<script lang="ts">
import {
  defineComponent,
  useContext,
  ref,
  useFetch,
} from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const orders = ref([])

    const { $axios, $swal } = useContext() as any

    useFetch(async () => {
      await $axios.$get(`/v1/admin/orders`).then((response: any) => {
        orders.value = response.data
      })
    })

    function deleteItem(data: any) {
      $swal({
        toast: false,
        title: 'Удалить?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#212E40',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Да',
        cancelButtonText: 'Отмена',
        position: 'center',
        showConfirmButton: true
      }).then((result: any) => {
        if (result.value) {
          $axios
            .$delete(`/v1/admin/orders/${data.orderId}`)
            .then((response: any) => {
              $swal({
                timerProgressBar: true,
                icon: 'success',
                title: response.message,
                didOpen: (toast: any) => {
                  toast.addEventListener('mouseenter', $swal.stopTimer)
                  toast.addEventListener('mouseleave', $swal.resumeTimer)
                },
              })
              orders.value.splice(data.index, 1)
            })
            .catch((error: any) => {
              switch (error.response.data.status) {
                case 422:
                  $swal({
                    timerProgressBar: true,
                    icon: 'error',
                    title: error.response.data.message,
                    didOpen: (toast: any) => {
                      toast.addEventListener('mouseenter', $swal.stopTimer)
                      toast.addEventListener(
                        'mouseleave',
                        $swal.resumeTimer
                      )
                    },
                  })
                  break
                default:
                  $swal({
                    timerProgressBar: true,
                    icon: 'error',
                    title: error.response.data.message,
                    didOpen: (toast: any) => {
                      toast.addEventListener('mouseenter', $swal.stopTimer)
                      toast.addEventListener(
                        'mouseleave',
                        $swal.resumeTimer
                      )
                    },
                  })
              }
            })
        }
      })
    }

    return { orders, deleteItem }
  },
})
</script>

maybe someone came across, when deleting elements by key, it always deletes the last element, everything checked data.index matches the index of the orders array but always deletes the last one

Answer 1

Most likely the template uses the index as the element key. If the composition of the array changes, then this will not work when using ref. You need to either use some unique field from the array elements, or use reactive, more details https://v3.ru.vuejs.org/ru/api/refs-api.html and https://v3.ru.vuejs.org /en/api/basic-reactivity.ht...