🔎 Search Component

Vamos a crear nuestro propio componente en un nuevo archivo .vue. Luego lo vamos a integrar con el componente principal App.vue. Dentro de este nuevo componente vamos a hacer uso del método search de nuestro servicio spotify.

Search.vue

1. Para organizar mejor nuestra app vamos a crear dentro de src una carpeta llamada components donde a partir de ahora vamos a guardar todos los componentes que creemos. Esto es simplemente para seguir mejorando la estructura de nuestra aplicación y que el App.vue quede separado del resto. Una vez hecho esto creamos nuestro componente Search.vue ➡️ src/components/Search.vue

Es una buena práctica mantener los nombres de los componentes en PascalCase, para el resto de los archivos vamos a utilizar siempre kebab-case.

1. Abrimos el archivo que creamos y le agregamos el siguiente código base:

<template lang="html">  
  <!-- ⚠️ Este div es importante: todos los componentes deben tener un unico elemento principal -->
  <div>
    <input type="text">
    <button type="button">Search</button>

    <ul>
      <li></li>
    </ul>
  </div>>
</template>

<script>
  export default {
    name: 'Search'
  }
</script>

1. Ya es momento de empezar a utilizar los conceptos que aprendimos sobre Vue. Vamos a realizar las siguientes tareas dentro de Search.vue:
   1. Creamos la función data (recuerden que devuelve un objeto). Con una propiedad llamada query y la inicializamos con un String vacío. también agregamos otra propiedad con el nombre results y le asignamos un Array vacío.
   2. Creamos el objeto methods y agregamos una función con el nombre search. Por el momento esta función permanece vacía o bien pueden agregarle un console.log() para testear más adelante.
   3. En la parte HTML definimos un input, necesitamos relacionarlo a la propiedad query de nuestro componente usando v-model.
   4. Seguimos en el HTML, tenemos que usar v-on (o @) para que cada vez que hagamos click en el botón "Search" se ejecute nuestro método search.
   5. Por ultimo podemos modificar nuestro método search para que con un console.log mostremos el valor de la propiedad query. Recuerden la manera podemos acceder a las propiedades del vm dentro de los métodos.

1. Ya tenemos la estructura base de nuestro componente. Nos falta insertarlo en la aplicación. Para eso tenemos que importarlo en el componente donde queremos utilizarlo. En nuestro caso App.vue. Aprovechamos también para limpiar el componente y sacar todo lo que genera el CLI a modo de ejemplo:

<template>
  <div id="app">
    <h1>📻 vue-music</h1>
    <hr>

    <search></search> <!-- insertamos el componente search -->
  </div>
</template>

<script>
  // Importamos el componente de search
  import Search from './components/Search.vue'

  export default {
    name: 'app',

    // Le indicamos al component App que puede disponer de un componente llamado Search
    components: { Search }
  }
</script>

Esta sintaxis: components: { Search } se corresponde con ES2015 y equivale a hacer components: { Search: Search }. El nombre de la propiedad es el nombre con el que luego podemos escribir el tag en HTML. Por ejemplo, si escribimos components: { Buscar: Search }, en HTML representaríamos nuestro tag como <buscar></buscar>.

En el caso que sea un component con mas de una palabra la manera correcta de declararlo seria: components: { AcaBuscamos: Search } y luego en HTML <aca-buscamos></aca-buscamos>. Vue se encargar de parsear la sintaxis PascalCase de JS y usarla como kebab-case en HTML.

Es momento de probar si nuestro código funciona. Recuerden que no es necesario reiniciar la aplicación ni volver a ejecutar el comando npm run dev (salvo que lo hayamos interrumpido nosotros). Podemos refrescar el browser y testear clickeando que el botón de "Search".

📝 Solución

⏪ ⏩