Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Detalle: Eliminar producto

Veamos cómo eliminar un producto de nuestro carrito de compras, independientemente de la cantidad de unidades.

Eliminación de un detalle en la lista

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?

Botón de eliminación

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.

Método `deleteProduct`

En nuestros métodos, vamos a crear un método nuevo llamado deleteProduct. Este, a su vez, se encargará de llamar a deleteProduct en el store.

Este método debe definirse como una acción en nuestro store. Por lo tanto, venimos aquí y, así como tenemos addProduct, vamos a agregar deleteProduct.

Encontrando la posición del producto

Anteriormente, usábamos el método find para encontrar el producto y luego modificar su cantidad. En este caso, más que encontrar el producto, queremos encontrar su posición en el arreglo para poder eliminarlo. Para ello, usamos el método findIndex.

El método findIndex nos devuelve el índice, es decir, la posición que el producto ocupa en el arreglo.

Por ejemplo, si el productID es 7, se comparará con cada detalle y, al encontrar uno con ID 7, nos devolverá el índice.

Eliminando el producto con `splice`

Luego, podemos eliminar el elemento que se encuentra en dicha posición. Para ello, accedemos al estado details. Como es un arreglo, invocamos el método splice.

El método splice acepta:

Una posición (la variable index, que indica dónde queremos eliminar).
Una cantidad (indicando cuántos elementos queremos eliminar a partir de ahí). En este caso, solo uno.

Probando la funcionalidad

Guardamos y probamos que funcione:

Damos clic en "Agregar al carrito" varias veces.
En vez de disminuir la cantidad hasta 0, presionamos "Eliminar".
Con esto, el producto desaparece completamente del carrito.
La computed property se encarga de ocultar el badge, debido a que la cantidad de items en el carrito (Cart) es 0.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

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.