Estoy usando una matriz llamada 'itemsCart' en mis datos () y mostrando esta matriz en un menú desplegable, creé un botón que eliminará este elemento de la matriz, pero no sé cómo debo hacerlo. Aquí está mi código:
<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: sé que necesito llamar a una función para eliminar, pero no sé cómo crear esta función
Intente pasar la identificación del elemento al método y filtre 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>