A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Integraci贸n a Platzi Music

18/53
Recursos

Aportes 24

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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>

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

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>

para que no les recargue la p谩gina con el bot贸n 鈥淏uscar鈥, cambien @click=鈥渟earch鈥 por @click.prevent=鈥渟earch鈥

Recuerden que si el v-for les da problemas es porque debe usar :key=鈥渢鈥

Saludos del 2021 (casi finalizando), si por casualidad tuviste un error llamado 鈥淣o ESLint configuration found鈥 al ejecutar npm run dev, quiz谩s estos pasos puedan ayudarte:

  1. Instalar el paquete 鈥渆slint-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 鈥渘pm uninstall bulma鈥, 鈥渘pm 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 鈥淚 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'}
  ]

-馃憣