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