Detalle: Eliminar producto

Bien. En la lección anterior hemos visto cómo aumentar y disminuir la cantidad de un detalle. Sin embargo, ¿qué ocurre si queremos eliminar un detalle completamente? Es decir, en vez de disminuir hasta cero, ¿qué pasa si queremos eliminar el producto de nuestra lista completamente? Para ello podemos agregar un botón más. Así como tenemos estos dos v button, vamos a agregar un tercer view button. A este botón le vamos a poner el texto "eliminar", y aquí vamos a llamar a un método deleteProduct. Entonces en nuestros métodos vamos a crear un método nuevo, se va a llamar deleteProduct, y este su vez se va a encargar de llamar a deleteProduct, ¿sí? Este método tenemos que definirlo como acción en nuestro store. Por lo tanto venimos aquí, y así como tenemos addProduct, vamos a agregar deleteProduct. Nosotros anteriormente usábamos el método find para encontrar al producto y luego modificar su cantidad. En este caso más que encontrar al producto, queremos encontrar la posición en la que se encuentra, para luego poder eliminarlo. Por lo tanto, aquí vamos a hacer uso del método findIndex. El método findIndex nos va a devolver el índice, es decir la posición que el producto se encuentra ocupando en el arreglo. Por ejemplo si el product ID es 7, se va a comparar con cada detalle, y al encontrar uno que tenga ID 7, esto nos va a devolver el índice. Entonces luego nosotros vamos a poder eliminar el elemento que se encuentra en dicha posición. Para ello accedemos al estado details, y como es un arreglo, vamos a invocar al método splice. El método splice acepta una posición, que es donde queremos eliminar. En este caso la posición está en la variable index. Y luego acepta una cantidad indicando cuántos elementos queremos eliminar a partir de allí. En este caso solo uno. Entonces guardamos, y vamos a probar que funcione. Le damos clic a agregar al carrito, varias veces, y en vez de disminuir la cantidad hasta 0, vamos a presionar eliminar. Con esto el producto desaparece completamente del carrito, y como vemos, la computed property se encarga de ocultar el badge, debido a que la cantidad de items en el Cart es 0.

Crea una cuenta y continúa aprendiendo 🚀

Detalle: Eliminar producto