Actualizando datos en la interfaz con Vue.js

Clase 14 de 17 • Curso Básico de Vue.js 2016

Camilo Ortegón

student•

El atributo :key="artist.mbid" genera conflictos porque cuando se recargan los artistas pueden existir algunos iguales y el componente tendría el mismo key. ¿Que tan grave es no usar el :key? Porque igual Vue permite correr el código así.

Ernesto Colmenarez

student•

Estoy teniendo el mismo error y no se cual podría ser la solución. Pensé que al cargar los artistas en el arreglo vue simplemente remplazaría la data, haría el ciclo y la asignación de los tributos nuevamente

Fran Delgado

student•

Alguien ha logrado solucionar esto de alguna forma???

Me uno a los compañeros que tienen error en esta leccion. En la consola sale lo siguiente:

[Vue warn]: It seems there are duplicate keys that is causing an update error. Make sure each v-for item has a unique key.

Iván Toro

student•

countrys: [
  {name: 'Colombia', value: 'colombia'},
  {name: 'Argentina', value: 'argentina'},
  {name: 'España', value: 'spain'},
],
selectedCountry: 'colombia'

Naylin Medina

student•

A mi me sale este mensaje en consola, y francamente no entiendo porqué; si alguien me pudiera ayudar, muy agradecida

Uncaught (in promise) TypeError: Cannot read property 'artist' of undefined at eval

En source me sale esta línea en rojo

_ .then(json => json.topartists.artist)_

Diego Forero

Team Platzi•

Puedes compartir tu archivo index.js para ayudarte a revisar.

Naylin Medina

student•

Hola, gracias por responder, este es mi archivo index.js

import config from './config'

const { apiKey } = config // const API_KEY = config.apiKey
const URL = `https://ws.audioscrobbler.com/2.0/?method=geo.gettopartists&country=country&api_key=${apiKey}&format=json`

export default function getArtists (country) {
    const url = URL.replace(':country', country)
    return fetch(url)
        .then(res => res.json())
        .then(json => json.topartists.artist)
    }

Jann Carlo Moreno Jiménez

student•

el dia de ayer corria todo muy normal pero hoy me sale esto

./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module not found: Error: Can't resolve '../vue-temp/vue-editor-bridge' in '/home/jann/Documents/Platzi/Vuejs-basico/platzimusic/src'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 15:0-49
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

y no tengo idea de porque sera, ya busque y no encontre una solucion, esto pasa al correr el npm run dev

Edward Steven Ramos Palacios

teacher•

Actualizaste alguno de tus modulos? o talvez corriste el script

npm audit fix?

Alejandro González Reyes

student•

El problema del :key lo solucione con el index del v-for

Edward Steven Ramos Palacios

teacher•

Excelente! Esta es a mi punto de vista una buena practica.

Juan Alberto Maizares

student•

esto seria el ajax de vue??

Andrés Yoshimar Aguilar Salgado

student•

te refieres a fetch?
es una nueva API del navegador y la puedes usar con javscript puro

Alexander Valencia

student•

:key

Jorge Luis Quiguango

student•

Cómo envío el nombre de un país con espacios?
Por ejemplo: ‘El Salvador’

Diego Forero

Team Platzi•

Cuando un parámetro por url tiene espacios es reemplazado automáticamente por %20 entonces debe quedar como el%20salvador y debería funcionar sin problema. No tienes que hacer nada, solo poner el país igual como se ponen los otros en el ejemplo.

Edward Steven Ramos Palacios

teacher•

Puedes usar el objeto global de JavaScript encodeURI(value) donde value puede ser el string que pones de ejemplo. Te da como resultado el%20salvador.

Aztlán Fuentes

student•

Mi selector no está funcionando

Edward Steven Ramos Palacios

teacher•

Podrias compartir tu codigo?

jose

student•

cual es la diferencia entre poner:

nombreMetodo: function () {…]
y:
nombreMetodo() {…}

ref: minuto 4:58 del video.

Nacho Décima

student•

el v-model de selectedCountry cuando cambia el valor ? o depende del option seleccionado ?

Carlos Garcia Castellanos

student•

La directiva v-model esta conformada por dos directivas, el v-input y el v-bind, es una de las ventajas de vuejs, por lo tanto como dices en tu pregunta, el valor cambiara segun el option que sea seleccionado.

Edgar Moises Valdez Faria

student•

Como podría usar los shortcut de vue.js en pug ?
En vez de usar v-bind:value, usar solo :value

Diego Forero

Team Platzi•

Tienes que definir el template que vas a usar, en el archivo artist.vue que esta en la pestaña de archivos esta el siguiente código

<template lang="pug">
  li.artist
    h2: a(:href="artist.url" target="_blank") {{ artist.name }}
    img(:src="artist.image[2]['#text']")
</template>

<script>
export default {
  name: 'artist',
  props: [ 'artist' ]
}
</script>

<style lang="stylus" scoped>
li.artist
  display block
  margin 10px 0
</style>

Como ves se usa el shorthand de v-bind en el enlace en el source de la imagen.

GUNJOP Dev

student•

que tal buenas espero que merespondan
con este error que tengo

Uncaught (in promise) TypeError: Cannot read property ‘artist’ of undefined
at eval (index.js?8323:10)
at <anonymous>

<code>

Diego Forero

Team Platzi•

Puedes compartir tu código así es difícil poder ayudarte, el error dice que estas tratando de obtener artist de una variable que esta llegando undefined.

Esto puede pasar por ejemplo por un error de digitación y causa que la variable de respuesta sea undefined.

GUNJOP Dev

student•

tube un error lo bueno es que ya lo identifique grasias

JEIMY JURIKO TIBURCIO CARRERA

student•

Hola alguien me podria ayudar con este error que se muestra en la consola porfavor, les agradeceria mucho

index.js?8323:10 Uncaught (in promise) TypeError: Cannot read property 'artist' of undefined at eval (index.js?8323:10)

import config from './config'

const { apiKey } = config
const URL = `https://ws.audioscrobbler.com/2.0/?method=geo.gettopartists&country=:country&api_key=${apiKey}&format=json`

export default function getArtists(country) {
  const url = URL.replace(':country', country)
  return fetch(url)
  	.then(res => res.json())
  	.then(json => json.topartists.artist)
}

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h2>Platzi Music</h2>
    <select  v-model="selectedCountry">
      <option :value="country.value" v-for="country in countries" v-bind:key="country.name">{{ country.name}}</option>
    </select>
    <spinner v-show="loading"></spinner>
    <ul>
      <artist v-for="artist in artists" v-bind:artist="artist" v-bind:key="artist.mbid"> {{ artist.name }}</artist>
    </ul>
    
  </div>
</template>

import Artist from './components/Artist.vue'
import getArtists from './api'
import Spinner from './components/Spinner.vue'
export default {
  name: 'app',
  data () {
    return {      
      artists: [],
      countries: [
        {name: 'Argentina', Value: 'argentina'},
        {name: 'Peru', Value: 'peru'},
        {name: 'España', Value: 'españa'},
        {name: 'Colombia', Value: 'colombia'},
        {name: 'Mexico', Value: 'mexico'},
      ],
      selectedCountry: 'argentina',
      loading: true
    }
  },
  components: {
    Artist,
    Spinner
  },
  methods: {
    refreshArtist(){
      const self = this
      this.loading = true
      getArtists(this.selectedCountry)
        .then(function (artists) {
          self.loading = false
          self.artists = artists
        })
    }
  },
  mounted(){
    this.refreshArtist()
  },

  watch: {
    selectedCountry(){
      this.refreshArtist()
    }
  }
}
</script>

les muestro mi codigo talvez haya un error que no logro encontrarlo

import config from './config'

const { apiKey } = config // const API_KEY = config.apiKey
const URL = `https://ws.audioscrobbler.com/2.0/?method=geo.gettopartists&country=country&api_key=${apiKey}&format=json`

export default function getArtists (country) {
    const url = URL.replace(':country', country)
    return fetch(url)
        .then(res => res.json())
        .then(json => json.topartists.artist)
    }

./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module not found: Error: Can't resolve '../vue-temp/vue-editor-bridge' in '/home/jann/Documents/Platzi/Vuejs-basico/platzimusic/src'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 15:0-49
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

<template lang="pug">
  li.artist
    h2: a(:href="artist.url" target="_blank") {{ artist.name }}
    img(:src="artist.image[2]['#text']")
</template>

<script>
export default {
  name: 'artist',
  props: [ 'artist' ]
}
</script>

<style lang="stylus" scoped>
li.artist
  display block
  margin 10px 0
</style>

import config from './config'

const { apiKey } = config
const URL = `https://ws.audioscrobbler.com/2.0/?method=geo.gettopartists&country=:country&api_key=${apiKey}&format=json`

export default function getArtists(country) {
  const url = URL.replace(':country', country)
  return fetch(url)
  	.then(res => res.json())
  	.then(json => json.topartists.artist)
}

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h2>Platzi Music</h2>
    <select  v-model="selectedCountry">
      <option :value="country.value" v-for="country in countries" v-bind:key="country.name">{{ country.name}}</option>
    </select>
    <spinner v-show="loading"></spinner>
    <ul>
      <artist v-for="artist in artists" v-bind:artist="artist" v-bind:key="artist.mbid"> {{ artist.name }}</artist>
    </ul>
    
  </div>
</template>

import Artist from './components/Artist.vue'
import getArtists from './api'
import Spinner from './components/Spinner.vue'
export default {
  name: 'app',
  data () {
    return {      
      artists: [],
      countries: [
        {name: 'Argentina', Value: 'argentina'},
        {name: 'Peru', Value: 'peru'},
        {name: 'España', Value: 'españa'},
        {name: 'Colombia', Value: 'colombia'},
        {name: 'Mexico', Value: 'mexico'},
      ],
      selectedCountry: 'argentina',
      loading: true
    }
  },
  components: {
    Artist,
    Spinner
  },
  methods: {
    refreshArtist(){
      const self = this
      this.loading = true
      getArtists(this.selectedCountry)
        .then(function (artists) {
          self.loading = false
          self.artists = artists
        })
    }
  },
  mounted(){
    this.refreshArtist()
  },

  watch: {
    selectedCountry(){
      this.refreshArtist()
    }
  }
}
</script>

Actualizando datos en la interfaz con Vue.js

Fundamentos de Vue.js

¿Dónde aprender Vue.js 3?

Introducción a Vue.js

Hola mundo con Vue.js

Manejo de condiciones con Vue.js

Filtro de datos en Vue.js

Control de eventos con Vue.js

Manejo de formularios con Vue.js

Listar elementos con Vue.js

Cómo crear componentes con Vue.js

Creando un Single Page App con Vue.js

PlatziMusic con Vue.js

Incorporando Stylus y Pug

Configurando la API de Lastfm en Vue.js

Estructurando componentes en Vue.js

Actualizando datos en la interfaz con Vue.js

Agregando indicador de progreso a la aplicación

Enviando una aplicación con Vue.js a producción

Se acaba este curso ¿quieres seguir aprendiendo Vue.js?