VList: Active Order Item

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.

Crea una cuenta y continúa aprendiendo 🚀

VList: Active Order Item