Integración a Platzi Music

Solución actualizada a 2019. (Algunas cosas cambiaron en Bulma)

<template lang="pug">
  #app
    section.section
      nav.navbar
        .field.has-addons
          .control.is-expanded
            input.input(
              type="text"
              placeholder="Buscar canciones"
              v-model="nombre")
          .control
            button.button.is-info(@click="buscar") Buscar
          .control
            button.button.is-danger &times;
          .control
            button.button
              span.is-size-7 Encontrado: {{ cantidad }}

      .container.custom
        .columns
          .colum(v-for="c in canciones") {{ c.nombre }},{{ c.artista }}
</template>

<script>

const canciones = [
  { 'nombre': 'De mes en mes', 'artista': 'Ricardo Arjona' },
  { 'nombre': 'Pinguinos en la cama', 'artista': 'Ricardo Arjona' },
  { 'nombre': 'Atrevete', 'artista': 'Calle 13' },
  { 'nombre': 'Nadie como tu', 'artista': 'Calle 13' }
]

export default {
  name: 'app',
  data () {
    return {
      canciones: [],
      nombre: ''
    }
  },
  methods: {
    buscar () {
      this.canciones = canciones
    }
  },
  computed: {
    cantidad () {
      return this.canciones.length
    }
  }
}
</script>

<style lang="scss">
@import 'scss/main.scss';

#app {

  .custom {
    margin-top: 30px;
  }

}
</style>

Equivalente a HTML puro:

<template>
    <div id="app">
        <section class="section">
            <nav class="nav has-shadow">
                <div class="container">
                    <input type="text" class="input is-large" placeholder="buscar canciones" v-model="searchQuery">
                    <a href="" class="button is-info is-large" @click.prevent="search">Buscar</a>
                    <a href="" class="button is-danger is-large">&times;</a>
                </div>

              
            </nav>

            <div class="container results">
                <div class="colums">
                    <div class="column" v-for="(track, index) in tracks" :key="index">
                        {{track.name}}
                        {{track.artist}}
                        
                    </div>
                    Resultados encontrados: {{searchMesssage}}
                </div>
            </div>
        </section>
    </div>
</template>

<script>
const tracks = [
    {
        name:'muchacha',artist: 'Luis albeto'
    },
    {
        name:'vivir la vida',artist: 'Marck antony'
    },
    {
        name:'Platzi',artist: 'Nacho'
    }
]

export default {
    name: 'app',
    data() {
        return {
            searchQuery: '',
            tracks: []
        }
    },
    methods: {
        search(){
            this.tracks = tracks;
        }
    },
    computed: {
        /*Las propiedades computadas siempre devuelven algo*/
        searchMesssage(){
            return this.tracks.length
        }
    },
}
</script>

Esto de usar frameworks CSS me hace flojo y confiado. mejor escribo mi propio CSS

para que no les recargue la página con el botón “Buscar”, cambien @click=“search” por @click.prevent=“search”

Recuerden que si el v-for les da problemas es porque debe usar :key=“t”

Saludos del 2021 (casi finalizando), si por casualidad tuviste un error llamado “No ESLint configuration found” al ejecutar npm run dev, quizás estos pasos puedan ayudarte:

1. Instalar el paquete “eslint-plugin-vue” en la versión específica:

npm i -D [email protected]^4.7.1

1. Dentro de la carpeta platzi-music, crear un archivo con el nombre de “.eslintrc” y colocar el siguiente pedazo de código:

{
    "extends": ["plugin:vue/base"],
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module"
    }
}

1. Ejecutar nuevamente el npm run dev, deberá hacerlo sin problemas.

https://bootstrap-vue.org/

Este framework basado en bootstrap le falicitara la vida en Vue

Todo chidori hasta el momento, me gusta el curso. 👏

<template lang="pug">
  #app
    section.section
      nav.nav.has-shadow
        .container
          input.input.is-large(type="text",
          placeholder="Buscar Canciones",
          v-model="searchQuery")
          a.button.is-info.is-large(@click="search") Buscar
          a.button.is-danger.is-large &times;
          p
            small {{searchMessage}}

      .container.results
        .columns
          .cloumn(v-for="t in tracks") {{t.name}} - {{t.artist}}
</template>

<script>
const tracks = [
  { name: "The Count of Tuscany", artist: "Dream Theater" },
  { name: "Remember", artist: "Circus Maximus" },
  { name: "Iconoclast", artist: "Symphony x" }
];
export default {
  name: "app",

  data() {
    return {
      searchQuery: "",
      tracks: []
    };
  },

  computed: {
    searchMessage() {
      return `Encontrados: ${this.tracks.length}`;
    }
  },

  methods: {
    search() {
      this.tracks = tracks;
    }
  }
};
</script>

//
<style lang="scss">
@import "./scss/main.scss";

.results {
  margin-top: 50px;
}
</style>

Creo que este curso es muy viejo 😐

<template lang="pug">
  #app 
   section.section
    nav.nav.has-shadow
      .container
       input.input.is-large(type="text", placeholder="Buscar tu musica" v-model="searchQuery") 
       a.button.is-large.is-danger(@click="clean()") &times
       a.button.is-large(@click="searchMusic()") BUSCAR
       
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      searchQuery:""
   }},
  


  methods: {
     searchMusic(){
       alert(this.searchQuery)
       this.clean()
     },
     clean(){
       this.searchQuery=""
       
     }
  }
   
}
</script>

para tener la misma version de bulma que el curso “npm uninstall bulma”, “npm i [email protected]”

Para los que sigan este curso usando Vue.js v3.x, si no les funciona la extension de Vue.js Devtools, instalen Vue.js Devtools Beta (v6.x).
Reinicien el navegador, y ya les va a reconocer el Vue.

Dato curioso: El camarografo tararea “I was made for lovingv you” cuando Ignacio la menciona.

me sale asi

Realice una actualización npm de las dependenias y se rompió todo sufrí al final lo deje de esta forma, pero tengo muchos WARN deprecated 😕

"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^3.2.1",
"eslint": "^7.11.0",
"eslint-config-standard": "^14.1.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-html": "^6.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^7.0.1",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"pug": "^2.0.0",
"pug-loader": "^2.4.0",
"sass-loader": "^5.0.1",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.5"

Solo para mencionar, a quienes les guste trabajar con Bulma pueden probar Buefy, una librería de componentes Vuejs basada en Bulma 😄

Cuales extensiones utilizas para que cambian los colores del texto pug?

La propiedad computada se va ha activar cada vez que exista una modificación en la propiedad tracks ? A que se debe esto ?

<template lang='pug'>
  #div
    section.section
      nav
        .field.has-addons
          p.control.is-expanded
            input.input.is-large(type='text' placeholder='Buacar canción' v-model='searchQuery')
          p.control
            a.button.is-large.is-info(@click='search') Buscar
          p.control
            a.button.is-large.is-danger
                i.fas.fa-sync-alt
      .container.custom
        .notification {{ seachMessage }}
      .container
        .columns.custom
          .column(v-for='track in tracks') {{ track.name }} - {{ track.artist }}

</template>

<script>
const tracks = [
  { name: 'Muchacha', artist: 'Luis Alberto' },
  { name: 'Hoy aca en el baile', artist: 'El Pepo' },
  { name: 'I was made for loving you', artist: 'Kiss' }
]
export default {
  name: 'app',
  data: () => ({
    searchQuery: '',
    tracks: []
  }),
  methods: {
    search () {
      this.tracks = tracks
    }
  },
  computed: {
    seachMessage () {
      return `Encontrados: ${this.tracks.length} resultados`
    }
  }
}
</script>

<style lang="scss">
@import "@/scss/main.scss";

.custom {
  margin-top: 2rem
}
</style>

Muy bien explicada la clase, lo unico malo es que con las actualizaciones de bulma las clases usadas en la clase no se ven igual en el navegador a la fecha de diciembre de 2019.

Genial!!

Creo que aunque no es muy relevante el buscador pudo haber quedado mejor con los botones en distintas posiciones🤨

const tracks = [
  {name: 'Muchacha', artist: 'Luis Albert'},
  {name: 'If you like piña Coladas, and be shown', artist: 'El pepo'},
  {name: 'I was made for locing you', artist: 'Kiss'}
  ]

-👌