Crea una cuenta y continúa aprendiendo 🚀

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

Frontend Aprendiz

VList: Active Order Item

Veamos cómo resaltar en el menú de la izquierda, el orden aplicado sobre los productos.

Implementación de orden por precio y nombre

En la lección anterior hemos implementado estas dos opciones para permitir ordenar los productos por precio y por nombre.

Sin embargo, cuando hacemos click en las opciones, estas no se quedan resaltadas.

Tenemos que proveerles de un atributo active con el valor de true para cuando se encuentren activas.

Creación de nuevo commit

Lo que vamos a hacer entonces es, primero que todo, crear un commit nuevo con los cambios recientes.

Indicamos que hemos implementado un orden por precio y por nombre: "sort products by price and name".

Modificaciones en CategoryList

Las opciones para ordenar se encuentran dentro de nuestro CategoryList.

Aquí nosotros tenemos que proveer de un atributo active, tal como hemos mencionado.

Esto es para que este ítem se marque como activo visualmente, consiguiendo este resultado.

Reorganización del componente

Antes de hacer ello, vamos a organizar un poco nuestro CategoryList.

Este componente se llama CategoryList, pero además de categorías está mostrando opciones para ordenar.

Vamos entonces a crear una nueva carpeta.

Esta carpeta tendrá como nombre left, ya que va a representar a nuestros componentes que están al lado izquierdo.

Aquí vamos a crear un archivo nuevo que se va a llamar OrderOptions.vue.

Este componente va a contener las opciones que tenemos para ordenar los productos.

Creación del componente OrderOptions

Vamos a empezar entonces agregando una sección template.

Y vamos a situar allí estas opciones.

Vamos a situar aquí el subheader seguido de las dos opciones de orderBy.

Entonces aquí vamos simplemente a llamar a este nuevo componente que es orderOptions.

Importación del nuevo componente

Para que esto funcione, tenemos que importar orderOptions en este componente.

Entonces vamos a empezar agregando una sección de components.

Y aquí vamos a agregar orderOptions con su correspondiente import: importOrderOptions.

Manejo de métodos

Ahora que hemos separado orderOptions, vemos que no estamos teniendo acceso a estos dos métodos.

Por lo tanto, aquí vamos a necesitar una sección script.

En su interior vamos a poner export default y vamos a definir una sección de métodos con las acciones del store de productos.

Vamos a cortar y vamos a pegar de este otro lado el mapeo de las acciones.

Para que esto funcione, tenemos que traer también los imports correspondientes.

En este caso estamos importando Map Actions de Piña y estamos importando nuestro store del archivo correspondiente.

Organización del componente CategoryList

Nuestro CategoryList ahora se encuentra más organizado.

Tenemos las categorías y luego tenemos aquí orderOptions a modo de tarea.

Podemos seguir organizando más este componente.

Por ejemplo, podríamos llamarlo leftMenu, que significa menú de la izquierda.

Y en su interior tener category options y orderOptions.

Activar opción seleccionada

Por ahora lo que vamos a hacer es simplemente definir cuál es el valor de active para estos dos items.

Para determinar el valor de active nosotros tenemos que acceder de alguna manera al estado del store.

Esto es para saber cuál es el valor de order.

De tal manera que aquí podamos escribir order === price, y aquí podamos escribir order === name.

Entonces si order es igual a price se pintará.

Y aquí si order es igual a name, se resaltará el item correspondiente.

Acceso al estado del store

¿De qué manera accedemos al estado de un store?

Hemos visto que eso se logra a través de Computer Properties.

Si no queremos definirlo manualmente, podemos hacer uso de la función mapState.

A mapState le indicamos cuál es el store que debe usar.

Luego, a través de un arreglo, le indicamos qué variable de estado nos interesa, en este caso order.

Al hacer esto, ya tenemos acceso al stateOrder a través de una computer property.

Prueba de funcionalidad

Si hasta aquí vamos a guardar.

Vamos a actualizar.

En un inicio ninguno está resaltado porque no hay ningún orden.

Presionamos por precio, se aplica el orden correspondiente.

Presionamos por nombre y de igual manera se aplica el orden correspondiente.

Esta lección no cuenta con recursos adicionales.

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

En la lección anterior hemos implementado estas dos opciones para permitir ordenar los productos por precio y por nombre. Sin embargo, cuando hacemos click en las opciones, estas no se quedan resaltadas. Tenemos que proveerles de un atributo "active" con el valor de "true" para cuando se encuentren activas. Lo que vamos a hacer entonces es, primero que todo, crear un "commit" nuevo con los cambios recientes, indicando que hemos implementado un orden por precio y por nombre. “sort products by price and name”. Bien, las opciones para ordenar se encuentran dentro de nuestro "CategoryList". Aquí nosotros tenemos que proveer de un atributo "active", tal como hemos mencionado, para que este ítem se marque como activo visualmente, consiguiendo este resultado. Sin embargo, antes de hacer ello, vamos a organizar un poco nuestro "CategoryList", ya que este componente se llama "CategoryList", pero además de categorías está mostrando opciones para ordenar. Vamos entonces a crear una nueva carpeta. Esta carpeta tendrá como nombre "left", ya que va a representar a nuestros componentes que están al lado izquierdo. Aquí vamos a crear un archivo nuevo que se va a llamar “OrderOptions.vue”. Este componente va a contener las opciones que tenemos para ordenar los productos. Vamos a empezar entonces agregando una sección template y vamos a situar allí estas opciones. Vamos a situar aquí el "subheader" seguido de las dos opciones de "orderBy". Y entonces aquí vamos simplemente a llamar a este nuevo componente que es "orderOptions". Para que esto funcione, tenemos que importar "orderOptions" en este componente. Entonces vamos a empezar agregando una sección de “components” y aquí vamos a agregar "orderOptions" con su correspondiente “import”. “importOrderOptions". Ahora que hemos separado "orderOptions", vemos que no estamos teniendo acceso a estos dos métodos. Por lo tanto, aquí vamos a necesitar una sección script. En su interior vamos a poner "export default" y vamos a definir una sección de métodos con las acciones del "store" de productos. Entonces vamos a cortar y vamos a pegar de este otro lado el mapeo de las acciones. Para que esto funcione, tenemos que traer también los imports correspondientes. En este caso estamos importando Map Actions de Piña y estamos importando nuestro store del archivo correspondiente. Entonces nuestro category list ahora se encuentra más organizado porque tenemos las categorías y luego tenemos aquí "orderOptions" a modo de tarea. Puede seguir organizando más este componente. Por ejemplo, podrías llamarlo "leftMenu", que significa menú de la izquierda y en su interior tener category options y "orderOptions". Si bien por ahora lo que vamos a hacer es simplemente definir cuál es el valor de "active" para estos dos items. Para determinar el valor de "active" nosotros tenemos que acceder de alguna manera al estado del "store" para saber cuál es el valor de "order". De tal manera que aquí podamos escribir “order ===price”, y aquí podamos escribir “order===name”. Entonces si "order" es igual a “price” se pintará y aquí si "order" es igual a “name”, se resaltará el item correspondiente. ¿De qué manera accedemos al estado de un "store"? Y hemos visto que eso se logra a través de Computer Properties. Si no queremos definirlo manualmente, podemos hacer uso de la función “mapState”. A “mapState” le indicamos cuál es el "store" que debe usar y luego, a través de un arreglo le indicamos qué variable de estado nos interesa en este caso "order". Al hacer esto ya tenemos acceso al “stateOrder” a través de una computer property. Si hasta aquí vamos a guardar. Vamos a actualizar. En un inicio ninguno está resaltado porque no hay ningún orden. Presionamos por “precio”, se aplica el orden correspondiente, presionamos por “nombre” y de igual manera se aplica el orden correspondiente.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos





































































































101

VList: Active Order Item























Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.