How to remove a item in array from my dropdown with Vue JS

Question

I'm using one array called 'itemsCart' in my data() and displaying this array in one dropdown, I created a button that will remove this item from array, but I don't know how I should do this. Here's my code:

<BreezeDropdownLink2 class=" hover:bg-gray-100 inline-flex w-full py-3 dark:hover:bg-gray-800">
  <div class="justify-between inline-flex w-full">
    <div class="rounded-md bg-gray-100 block h-12 dark:bg-vd2">
      <img src="../Assets/Img/product1.png" class="w-16 h-12">
    </div>
  <div>
  <p class="font-semibold text-gray-500 dark:text-gray-300" v-html="itemsCart[0].title"></p>
  <span class="text-xs mb-10 text-gray-400">By Apple</span>
  </div>
    <div class="inline-flex">
      <NumberInput/>
      <span class="font-semibold text-gray-500 ml-3 mt-5 dark:text-gray-300" v-html="'$'+itemsCart[0].price+'.00'"></span>
      <a @click="" class="dark:text-gray-300"><svg data-v-c52069be="" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cart-item-remove cursor-pointer feather feather-x"><line data-v-c52069be="" x1="18" y1="6" x2="6" y2="18"></line><line data-v-c52069be="" x1="6" y1="6" x2="18" y2="18"></line></svg>
      </a>
    </div>
  </div>
</BreezeDropdownLink2>
-------------------
<script>
  data(){
    return {
      itemsCart:[
          {
            id: 1,
            title: 'Apple Watch <br> Series 5',
            price: 339.00,
          },
          {
            id: 2,
            title: 'Google - <br>Google Home...',
            price: 129.29,
          },
          {
            id: 3,
            title: 'Apple iPhone<br> 11 (64GB, Black)',
            price: 699.99,
          },
          {
            id: 4,
            title: 'Apple iMac 27-<br>inch',
            price: 999.99,
          },
          {
            id: 5,
            title: 'Apple -<br> MacBook Air...',
            price: 999.99,
          }
        ]
    }
  }
</script>

obs: I know that I need call a function to remove, but I don't know how create this function

Answer 1

Try pass item id to method and filter itemsCart:

new Vue({
  el: "#demo",
  data(){
    return {
      itemsCart:[{id: 1, title: 'Apple Watch <br> Series 5', price: 339.00,}, {id: 2, title: 'Google - <br>Google Home...', price: 129.29,}, {id: 3, title: 'Apple iPhone<br> 11 (64GB, Black)', price: 699.99,}, {id: 4, title: 'Apple iMac 27-<br>inch', price: 999.99,}, {id: 5, title: 'Apple -<br> MacBook Air...', price: 999.99,}]
    }
  },
  methods: {
    removeItem(id) {
      this.itemsCart = this.itemsCart.filter(i => i.id !== id)
    }
  },
  computed: {
    itemsCount() {
      return this.itemsCart.length
    }
  }
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<h3>{{ itemsCount }} items</h3>
  <div v-for="(item, i) in itemsCart" :key="i" class=" hover:bg-gray-100 inline-flex w-full py-3 dark:hover:bg-gray-800">
    <div class="justify-between inline-flex w-full">
      <div class="rounded-md bg-gray-100 block h-12 dark:bg-vd2">
        <img src="../Assets/Img/product1.png" class="w-16 h-12">
      </div>
    <div>
    <p class="font-semibold text-gray-500 dark:text-gray-300" v-html="item.title"></p>
    <span class="text-xs mb-10 text-gray-400">By Apple</span>
    </div>
      <div class="inline-flex">
        <!--<NumberInput/>-->
        <span class="font-semibold text-gray-500 ml-3 mt-5 dark:text-gray-300" v-html="'$'+item.price+'.00'"></span>
        <a @click="removeItem(item.id)" class="dark:text-gray-300">
          <svg data-v-c52069be="" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cart-item-remove cursor-pointer feather feather-x">
            <line data-v-c52069be="" x1="18" y1="6" x2="6" y2="18"></line>
            <line data-v-c52069be="" x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>