{"id":28855,"date":"2024-04-29T13:23:57","date_gmt":"2024-04-29T12:23:57","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/desarrolla-un-eficiente-sistema-de-busqueda-con-filtros-en-vue-js\/"},"modified":"2024-06-03T18:44:01","modified_gmt":"2024-06-03T17:44:01","slug":"desarrolla-un-eficiente-sistema-de-busqueda-con-filtros-en-vue-js","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/develop-an-efficient-search-system-with-filters-in-vue-js\/","title":{"rendered":"Develop an Efficient Search System with Filters in Vue.js"},"content":{"rendered":"<p>Creating a powerful and agile search function in a web application can significantly improve the user experience, allowing you to quickly find what you need without wasting time browsing through irrelevant information. Vue.js, a progressive JavaScript framework, makes it easy to integrate such functionalities thanks to its reactive system and component-centric architecture. In this article, we will explore how to implement a search function with filters in Vue.js so that you can efficiently apply it in your projects.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/develop-an-efficient-search-system-with-filters-in-vue-js\/#Comprendiendo_los_Principios_Basicos_de_Vuejs\" >Understanding the Basics of Vue.js<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/develop-an-efficient-search-system-with-filters-in-vue-js\/#Instalacion_y_Configuracion_Inicial\" >Installation and Initial Configuration<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/develop-an-efficient-search-system-with-filters-in-vue-js\/#Estructurando_el_Componente_de_Busqueda\" >Structuring the Search Component<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/develop-an-efficient-search-system-with-filters-in-vue-js\/#Creando_el_Template_del_Componente\" >Creating the Component Template<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/develop-an-efficient-search-system-with-filters-in-vue-js\/#Anadiendo_la_Logica_Reactiva\" >Adding Reactive Logic<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/develop-an-efficient-search-system-with-filters-in-vue-js\/#Estilos_del_Componente\" >Component Styles<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/develop-an-efficient-search-system-with-filters-in-vue-js\/#Integracion_y_Pruebas\" >Integration and Testing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/develop-an-efficient-search-system-with-filters-in-vue-js\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Comprendiendo_los_Principios_Basicos_de_Vuejs\"><\/span>Understanding the Basics of Vue.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we dive into the code, it is crucial to understand some basic Vue.js concepts that are essential for working with this framework. Vue.js uses a reactive data model where the model and view are in sync. This means that any changes to the model data are immediately reflected in the view.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Instalacion_y_Configuracion_Inicial\"><\/span>Installation and Initial Configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To get started, you will need to have Node.js and npm installed on your computer. You can then create a new Vue.js project using the Vue CLI, which is a command-line tool that makes it easy to initially set up a Vue project.<\/p>\n<pre><code class=\"&quot;language-bash&quot;\">npm install -g @vue\/cli vue create my-search-project cd my-search-project npm run serve<\/code><\/pre>\n<p>This command will create a new project with basic settings that you can customize to your needs.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Estructurando_el_Componente_de_Busqueda\"><\/span>Structuring the Search Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The first step is to structure the component that will handle the search and filter logic. Let&#039;s create a component called <code>SearchComponent<\/code>. This component will include an input field for searching and several filters that users can apply.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creando_el_Template_del_Componente\"><\/span>Creating the Component Template<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Inside the directory <code>src\/components<\/code>, creates a new file called <code>SearchComponent.vue<\/code>. <\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;template&gt;\n  &lt;div&gt;\n    &lt;input v-model=&quot;searchQuery&quot; @input=&quot;filterResults&quot; placeholder=&quot;Look for...&quot;&gt;\n    &lt;div&gt;\n      &lt;label for=&quot;filter-category&quot;&gt;Category:&lt;\/label&gt;\n      &lt;select v-model=&quot;filters.category&quot; @change=&quot;filterResults&quot; id=&quot;filter-category&quot;&gt;\n        &lt;option value=&quot;&quot;&gt;All&lt;\/option&gt;\n        &lt;option value=&quot;categoria1&quot;&gt;Category 1&lt;\/option&gt;\n        &lt;option value=&quot;categoria2&quot;&gt;Category 2&lt;\/option&gt;\n      &lt;\/select&gt;\n    &lt;\/div&gt;\n    &lt;div id=&quot;search-results&quot;&gt;\n      &lt;ul&gt;\n        &lt;li v-for=&quot;item in filteredItems&quot; :key=&quot;item.id&quot;&gt;{{ item.name }}&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Anadiendo_la_Logica_Reactiva\"><\/span>Adding Reactive Logic<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In Vue.js, component logic and data are handled in the <code>&lt;script&gt;<\/code> from the file <code>.vue<\/code>. Below is how you could implement logic to filter data based on the search query and selected filters.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">&lt;script&gt;\nexport default {\n  data() {\n    return {\n      searchQuery: &#039;&#039;,\n      filters: {\n        category: &#039;&#039;\n      },\n      items: [],\n      filteredItems: []\n    };\n  },\n  methods: {\n    fetchItems() {\n      \/\/ Simulaci\u00f3n de una petici\u00f3n API\n      this.items = [\n        { id: 1, name: &#039;Elemento 1&#039;, category: &#039;categoria1&#039; },\n        { id: 2, name: &#039;Elemento 2&#039;, category: &#039;categoria2&#039; },\n        \/\/ m\u00e1s elementos...\n      ];\n      this.filterResults();\n    },\n    filterResults() {\n      this.filteredItems = this.items.filter(item =&gt; {\n        return item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) &amp;&amp;\n               (!this.filters.category || item.category === this.filters.category);\n      });\n    }\n  },\n  mounted() {\n    this.fetchItems();\n  }\n}\n&lt;\/script&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Estilos_del_Componente\"><\/span>Component Styles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Finally, you can add some basic styles to improve the appearance of the search component.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">#search-results ul {\n  padding: 0;\n}\n\n#search-results li {\n  list-style: none;\n  margin: 5px 0;\n}<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Integracion_y_Pruebas\"><\/span>Integration and Testing<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Once you have finished developing the component <code>SearchComponent<\/code>, you will have to integrate it into your main application. Make sure you import and register the component in your Vue instance or your parent component.<\/p>\n<p>After integrating the component, it is essential to perform testing to ensure that everything works as expected. You can test different search queries and filter combinations to verify that the results are filtered correctly.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Implementing a search function with filters in Vue.js may seem complex at first, but by following the steps outlined and using Vue&#039;s reactive capabilities, you can create a robust and enjoyable user experience. This type of functionality not only improves the usability of your application, but also makes it more accessible and efficient, allowing users to get precisely what they are looking for with very little effort.<\/p>\n<p>I encourage you to explore more about Vue.js and how it can help you in your projects by visiting <a href=\"https:\/\/nelkodev.com\/en\/\">my blog<\/a> where you will find more resources and guides.<br \/>\nIf you have questions or need help with your projects, don&#039;t hesitate to <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">get in touch with me<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Creating a powerful and agile search function in a web application can significantly improve the user experience, allowing them to quickly find what they need without wasting time browsing through irrelevant information. Vue.js, a progressive JavaScript framework, makes it easy to integrate such functionalities thanks to its reactive system and user-centric architecture.<\/p>","protected":false},"author":1,"featured_media":28856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207,1939],"tags":[205,222,90,1608,628,860,2205,2208,1008,514,562],"class_list":["post-28855","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","category-pruebas-de-frontend","tag-blog","tag-busqueda","tag-con","tag-desarrolla","tag-eficiente","tag-filtros","tag-frontend","tag-nodejs","tag-pruebas","tag-sistema","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28855","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28855"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28855\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28856"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}