Agregando indicador de progreso a la aplicación

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

Fabián Veliz

student•

Buenas, me gustaría aportar una mejora para la función getArtists.
En caso de que suceda algún error a la hora de traer los resultados, el spinner quedaría cargando por siempre. Con este código aseguramos de que si hay un error lo veamos por consola y el spinner desaparezca cuando se complete la request.

getArtists(this.selectedCountry)
        .then(artists => self.artists = artists)
        .catch(error => console.error(error))
        .finally(() => self.loading = false );

David Daniel Castillo Nava

student•

Buen aporte te ganaste el me gusta!!!

Diego Camacho

student•

Excelente aporte!

Iván Toro

student•

Spinner:

<template>
  <div class="loader">Loading...</div>
</template>

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

<style>
.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #45ab45;
  background: -moz-linear-gradient(left, #45ab45 10%, rgba(69,171,69, 0) 42%);
  background: -webkit-linear-gradient(left, #45ab45 10%, rgba(69,171,69, 0) 42%);
  background: -o-linear-gradient(left, #45ab45 10%, rgba(69,171,69, 0) 42%);
  background: -ms-linear-gradient(left, #45ab45 10%, rgba(69,171,69, 0) 42%);
  background: linear-gradient(to right, #45ab45 10%, rgba(69,171,69, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #45ab45;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #ffffff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

Raul Palacios

student•

CSS Spinners

David Vargas

student•

Buenas,
Me gustaría saber como se puede depurar en el navegador en caso de un error, ya que al inspeccionar solo veo el codigo html o css.
Mil Gracias!!!

William Reaño Reyes

student•

debugger pon esta palabra reservad luego del coodigo que quieres debuguear

Juan Manuel Viveros Martinez

student•

instala esta extensión de Google Chrome de Vue.Js con ella puedes hacer un mejor debug cuando la instales el detecta que estas usando Vue y al dar click derecho en inspeccionar elemento se activa un tap con el nombre vue, en el puedes hacer infinidad de cosas, te la recomiendo.

Extensión de Vue.js de clcik aquí

David Daniel Castillo Nava

student•

Mi código quedo así

<template lang="pug">
	#app
		img(src='./assets/logo.png')
		h1 PlatziMusic
		select(v-model="selectedCountry")
			option(v-for="country in countries" v-bind:value="country.value") {{ country.name }}
		spinner(v-show="loading")
		ul(v-show="!loading")
			artist(v-for="artist in artists" :artist="artist" :key="artist.mbid")
	
</template>

<script>
import Artist from './components/Artist.vue'
import Spinner from './components/Spinner.vue'
import getArtists from './api'

export default {
	name: 'app',
	data () {
		return {
			artists: [],
			countries: [
				{ name: 'Argentina', value: 'argentina'},
				{ name: 'Colombia', value: 'colombia'},
				{ name: 'España', value: 'spain'}
			],
			selectedCountry: 'argentina',
			loading: true
		}
	},
	components: {
		Artist,
		Spinner
	},
	methods: {
		refreshArtists() {
			const self = this
			this.loading = true
			getArtists(this.selectedCountry)
				.then(artists => self.artists = artists )
				.catch(error => console.error(error))
				.finally(()=>self.loading = false)
					
		}
	},
	mounted () {
			this.refreshArtists()
	},
	watch: {
		selectedCountry () {
			this.refreshArtists()
		}
	}
}
</script>

<style lang="stylus">
#app
	font-family 'Avenir', Helvetica, Arial, sans-serif
	-webkit-font-smoothing antialiased
	-moz-osx-font-smoothing grayscale
	text-align center
	color #2c3e50
	margin-top 60px

h1, h2
	font-weight normal

ul
	list-style-type none
	padding 0

li
	display inline-block
	margin 0 10px

a
	color #42b983
</style>

Douglas Ramón Sánchez Durán

student•

Para no tener problemas con el this, podemos reemplazar lo siguiente:

data () {
	return {
		artists: [],
		...
	}
}

por:

data: () => ({
	artists: [],
	...
})

Douglas Ramón Sánchez Durán

student•

Es decir:

export default {
  data: () => ({
    loading: true,
    artists: [],
    countries: [
      {
        name: 'Argentina', value: 'argentina'
      },
      {
        name: 'Colombia', value: 'colombia'
      },
      {
        name: 'España', value: 'spain'
      },
    ],
    selectedCountry: 'argentina'
  }),

  name: 'app',
  components: {
    Artist,
    Spinner
  },
  methods: {
    refreshArtists() {
      this.loading = true
      getArtists(this.selectedCountry)
        .then( (artists) => {
          this.artists = artists
          this.loading = false
        })
    }
  },
  mounted: function() {
    this.refreshArtists()
  },
  watch: {
    selectedCountry: function() {
      this.refreshArtists()
    }
  }
}

Alejandro González Reyes

student•

Ahora entiendo mejor los componentes.

Alejandro González Reyes

student•

Mi aporte con algo de azúcar sintáctico

<template lang="pug">
  #app
    img(src='./assets/logo.png')
    h1 {{ msg }}
    select(v-model='selectedCountry')
      option(v-for='(country, index) in countries' v-bind:value='country.name' v-bind:key='index') {{ country.name }}
    
    spinner(v-show='loading')

    ul 
      artist(v-for='(artist, index) in artists' v-bind:artist='artist' v-bind:key='index')
      // li(v-for='artist in artists') {{ artist.name }}
</template>

<script>
import Artist from './components/Artist.vue';
import Spinner from './components/Spinner.vue';
import {getArtists, getCountries} from './api';

export default {
  name: 'app',
  data () {
    return {
      msg: 'PlatziMusic by Last.fm',
      artists: [],
      countries: [],
      selectedCountry: 'Mexico',
      loading: true,
    }
  },
  components: {
    artist: Artist,
    spinner: Spinner
  },
  methods: {
    refreshArtists: function() {
      this.loading = true;
      this.artists = [];

      const that = this;
      getArtists(this.selectedCountry).then(function(artists){
        that.artists = artists;
      }).finally(function(){
        //En caso de error, siempre se muestra el spinner, entonces controlamos ese comportamiento
        that.loading = false;
      })
    }
  },
  mounted: function() {
    /*const that = this;
    getArtists().then(function(artists){
      that.artists = artists;
    })*/
    this.refreshArtists();

    const that = this;
    getCountries().then(function(countries){
      that.countries = countries;
    })
  },
  watch: {
    selectedCountry: function() {
      this.refreshArtists();
    }
  } 
}
</script>

<style lang="stylus">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Alejandro González Reyes

student•

Mi Spinner

<template>
	<div class="loader">Loading...</div>
</template>

<script>
//https://projects.lukehaas.me/css-loaders/
export default {
	name: 'spinner'
}
</script>

<style>
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(31,85,94, 0.2);
  border-right: 1.1em solid rgba(31,85,94, 0.2);
  border-bottom: 1.1em solid rgba(31,85,94, 0.2);
  border-left: 1.1em solid #1f555e;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>```

Alejandro González Reyes

student•

Componente Artist

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

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

<style lang="stylus" scoped>
	li
		display block
		margin 10px 0
	a
		color: steelblue
		text-decoration none
		
</style>```

Alejandro González Reyes

student•

Archivo index Aporte, petición a API con nombres de paises en ISO-361

import config from './config.js';

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

const URLCountries = 'https://restcountries.eu/rest/v2/all';

/*export default function getArtists(country) {
	const url = URL.replace(":country", country);

	return fetch(url).then(function(resp) {
		return resp.json();
		
	}).then(function(json) {
		return json.topartists.artist;
	})
}*/

function getArtists(country) {
	const url = URL.replace(":country", country);

	return fetch(url).then(function(resp) {
		return resp.json();
		
	}).then(function(json) {
		return json.topartists.artist;
	})
}

function getCountries() {
	return fetch(URLCountries).then(function(resp){
		return resp.json();
	}).then(function(json){
		return json;
	})
}

export {
	getArtists,
	getCountries
}```

Alexander Valencia

student•

getArtists(this.selectedCountry)
  then(artists => self.artists = artists)
  .catch(error => console.error(error))
  .finally(() => self.loading = false );

Vicente López Robles

student•

Aunque si me funciona el ejercicio, en la consola me manda errores, ¿que puede ser?.

WebSocket connection to 'ws://localhost:8080/sockjs-node/876/5x5emzoi/websocket' failed: WebSocket is closed before the connection is established.
WebSocketTransport.close @ sockjs.js?3600:2998
client?cd17:173 
Invalid Host/Origin header
error @ client?cd17:173
client?cd17:176 
[WDS] Disconnected!
close @ client?cd17:176
sockjs.js?3600:2998

walter Jorge

student•

hola no me muestra ningún error pero no carga el loading.

Manuel Ojeda

student•

Necesitamos más información de tu error, ayúdame dando el código que tienes para juntos ver que pasa

Aarón González

student•

🤔 ¿Nos puedes compartir tu código para poder ayudarte de forma más precisa?

Miguelangel Ulianov Caro

student•

Se puede hacer algo para cargar los archivos .vue en la plataforma como ocurre con los archivos .js

Usuario anónimo

user•

el script de app.vue

<script>
import artist from './components/artist.vue'
import spinner from './components/spinner.vue'
import getArtists from './api'

export default {
  name: 'app',
  data () {
    return {
      artists:[],
      countries:[
        {name: 'Argentina', value: 'argentina'},
        {name: 'Colombia', value: 'colombia'},
        {name: 'España', value: 'spain'}
      ],
      selectedCountry: 'argentina',
      loading: true
    }
  },
  components:{
    artist,
    spinner
  },
  methods:{
    refreshArtists(){
    const self = this
    this.loading = true
    this.artists = []
    getArtists(this.selectedCountry)
    .then(function(){
    self.loading = false
    self.artists = artists
    })
    }
  },
  mounted: function(){
    this.refreshArtists()
  },
  watch:{
    selectedCountry(){
    this.refreshArtists()
    }
  }
}
</script>

Usuario anónimo

user•

y el style de app.vue

<style lang="stylus">
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px

h1, h2
  font-weight normal

ul
  list-style-type none
  padding 0

li
  display inline-block
  margin 0 10px

a
  color #42b983
</style>

Usuario anónimo

user•

Buenas tardes alguien me podria ayudar. Lo que pasa es que escribo en el terminal " npm run dev " y me sale este error.

ERROR in ./~~/vue-loader/lib/template-compiler?{“id”:“data-v-0cd8554f”,“hasScoped”:false}!./~~/vue-loader/lib/template-compiler/preprocessor.js?engine=pug!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue
(Emitted value instead of an instance of Error)
Error compiling template:

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

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

@ ./src/App.vue 10:2-263
@ ./src/main.js
@ multi (webpack)-dev-server/client? webpack/hot/dev-server ./src/main.js

ERROR in ./~~/babel-loader/lib!./~~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module not found: Error: Can’t resolve ‘./components/artist.vue’ in ‘C:\Users\Andrew Ramirez\Documents\ARCHIVOS PLATZI\CURSO VUE.JS\Proyect\platzimusica\src’
@ ./~~/babel-loader/lib!./~~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 15:0-45
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client? webpack/hot/dev-server ./src/main.js

Diego Forero

Team Platzi•

Estas retornando mas de un elemento en el template que usas en vue.

Usuario anónimo

user•

este es mi codigo del archivo app.vue. por partes

<template lang="pug">
  #app
  img(src='./assets/logo.png')
  h1 Platzimusica
  select(v-model="selectedCountry")
    option(v-for="country in countries" v-bind:value="country.value") {{country.name}}

  spinner(v-show="loading")
  ul
    artist(v-for="artist in artists" v-bind:artist="artists" v-bind:key="artist.mbid")
  
</template>

Diego Forero

Team Platzi•

Tienes un error de identación ni el img, h1, select, spinner, ul estan dentro del div #app, corre la identación a la derecha de todos los elementos excepto el #app

Nacho Décima

student•

Por que es necesario hacer ?

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

Roberto Prince

student•

es para que vue sepa el nombre del tag

<template>
  <div class="loader">Loading...</div>
</template>

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

<style>
.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #45ab45;
  background: -moz-linear-gradient(left, #45ab45 10%, rgba(69,171,69, 0) 42%);
  background: -webkit-linear-gradient(left, #45ab45 10%, rgba(69,171,69, 0) 42%);
  background: -o-linear-gradient(left, #45ab45 10%, rgba(69,171,69, 0) 42%);
  background: -ms-linear-gradient(left, #45ab45 10%, rgba(69,171,69, 0) 42%);
  background: linear-gradient(to right, #45ab45 10%, rgba(69,171,69, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #45ab45;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #ffffff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

<template lang="pug">
	#app
		img(src='./assets/logo.png')
		h1 PlatziMusic
		select(v-model="selectedCountry")
			option(v-for="country in countries" v-bind:value="country.value") {{ country.name }}
		spinner(v-show="loading")
		ul(v-show="!loading")
			artist(v-for="artist in artists" :artist="artist" :key="artist.mbid")
	
</template>

<script>
import Artist from './components/Artist.vue'
import Spinner from './components/Spinner.vue'
import getArtists from './api'

export default {
	name: 'app',
	data () {
		return {
			artists: [],
			countries: [
				{ name: 'Argentina', value: 'argentina'},
				{ name: 'Colombia', value: 'colombia'},
				{ name: 'España', value: 'spain'}
			],
			selectedCountry: 'argentina',
			loading: true
		}
	},
	components: {
		Artist,
		Spinner
	},
	methods: {
		refreshArtists() {
			const self = this
			this.loading = true
			getArtists(this.selectedCountry)
				.then(artists => self.artists = artists )
				.catch(error => console.error(error))
				.finally(()=>self.loading = false)
					
		}
	},
	mounted () {
			this.refreshArtists()
	},
	watch: {
		selectedCountry () {
			this.refreshArtists()
		}
	}
}
</script>

<style lang="stylus">
#app
	font-family 'Avenir', Helvetica, Arial, sans-serif
	-webkit-font-smoothing antialiased
	-moz-osx-font-smoothing grayscale
	text-align center
	color #2c3e50
	margin-top 60px

h1, h2
	font-weight normal

ul
	list-style-type none
	padding 0

li
	display inline-block
	margin 0 10px

a
	color #42b983
</style>

export default {
  data: () => ({
    loading: true,
    artists: [],
    countries: [
      {
        name: 'Argentina', value: 'argentina'
      },
      {
        name: 'Colombia', value: 'colombia'
      },
      {
        name: 'España', value: 'spain'
      },
    ],
    selectedCountry: 'argentina'
  }),

  name: 'app',
  components: {
    Artist,
    Spinner
  },
  methods: {
    refreshArtists() {
      this.loading = true
      getArtists(this.selectedCountry)
        .then( (artists) => {
          this.artists = artists
          this.loading = false
        })
    }
  },
  mounted: function() {
    this.refreshArtists()
  },
  watch: {
    selectedCountry: function() {
      this.refreshArtists()
    }
  }
}

<template lang="pug">
  #app
    img(src='./assets/logo.png')
    h1 {{ msg }}
    select(v-model='selectedCountry')
      option(v-for='(country, index) in countries' v-bind:value='country.name' v-bind:key='index') {{ country.name }}
    
    spinner(v-show='loading')

    ul 
      artist(v-for='(artist, index) in artists' v-bind:artist='artist' v-bind:key='index')
      // li(v-for='artist in artists') {{ artist.name }}
</template>

<script>
import Artist from './components/Artist.vue';
import Spinner from './components/Spinner.vue';
import {getArtists, getCountries} from './api';

export default {
  name: 'app',
  data () {
    return {
      msg: 'PlatziMusic by Last.fm',
      artists: [],
      countries: [],
      selectedCountry: 'Mexico',
      loading: true,
    }
  },
  components: {
    artist: Artist,
    spinner: Spinner
  },
  methods: {
    refreshArtists: function() {
      this.loading = true;
      this.artists = [];

      const that = this;
      getArtists(this.selectedCountry).then(function(artists){
        that.artists = artists;
      }).finally(function(){
        //En caso de error, siempre se muestra el spinner, entonces controlamos ese comportamiento
        that.loading = false;
      })
    }
  },
  mounted: function() {
    /*const that = this;
    getArtists().then(function(artists){
      that.artists = artists;
    })*/
    this.refreshArtists();

    const that = this;
    getCountries().then(function(countries){
      that.countries = countries;
    })
  },
  watch: {
    selectedCountry: function() {
      this.refreshArtists();
    }
  } 
}
</script>

<style lang="stylus">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

<template>
	<div class="loader">Loading...</div>
</template>

<script>
//https://projects.lukehaas.me/css-loaders/
export default {
	name: 'spinner'
}
</script>

<style>
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(31,85,94, 0.2);
  border-right: 1.1em solid rgba(31,85,94, 0.2);
  border-bottom: 1.1em solid rgba(31,85,94, 0.2);
  border-left: 1.1em solid #1f555e;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>```

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

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

<style lang="stylus" scoped>
	li
		display block
		margin 10px 0
	a
		color: steelblue
		text-decoration none
		
</style>```

import config from './config.js';

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

const URLCountries = 'https://restcountries.eu/rest/v2/all';

/*export default function getArtists(country) {
	const url = URL.replace(":country", country);

	return fetch(url).then(function(resp) {
		return resp.json();
		
	}).then(function(json) {
		return json.topartists.artist;
	})
}*/

function getArtists(country) {
	const url = URL.replace(":country", country);

	return fetch(url).then(function(resp) {
		return resp.json();
		
	}).then(function(json) {
		return json.topartists.artist;
	})
}

function getCountries() {
	return fetch(URLCountries).then(function(resp){
		return resp.json();
	}).then(function(json){
		return json;
	})
}

export {
	getArtists,
	getCountries
}```

WebSocket connection to 'ws://localhost:8080/sockjs-node/876/5x5emzoi/websocket' failed: WebSocket is closed before the connection is established.
WebSocketTransport.close @ sockjs.js?3600:2998
client?cd17:173 
Invalid Host/Origin header
error @ client?cd17:173
client?cd17:176 
[WDS] Disconnected!
close @ client?cd17:176
sockjs.js?3600:2998

<script>
import artist from './components/artist.vue'
import spinner from './components/spinner.vue'
import getArtists from './api'

export default {
  name: 'app',
  data () {
    return {
      artists:[],
      countries:[
        {name: 'Argentina', value: 'argentina'},
        {name: 'Colombia', value: 'colombia'},
        {name: 'España', value: 'spain'}
      ],
      selectedCountry: 'argentina',
      loading: true
    }
  },
  components:{
    artist,
    spinner
  },
  methods:{
    refreshArtists(){
    const self = this
    this.loading = true
    this.artists = []
    getArtists(this.selectedCountry)
    .then(function(){
    self.loading = false
    self.artists = artists
    })
    }
  },
  mounted: function(){
    this.refreshArtists()
  },
  watch:{
    selectedCountry(){
    this.refreshArtists()
    }
  }
}
</script>

<style lang="stylus">
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px

h1, h2
  font-weight normal

ul
  list-style-type none
  padding 0

li
  display inline-block
  margin 0 10px

a
  color #42b983
</style>

<template lang="pug">
  #app
  img(src='./assets/logo.png')
  h1 Platzimusica
  select(v-model="selectedCountry")
    option(v-for="country in countries" v-bind:value="country.value") {{country.name}}

  spinner(v-show="loading")
  ul
    artist(v-for="artist in artists" v-bind:artist="artists" v-bind:key="artist.mbid")
  
</template>

Agregando indicador de progreso a la aplicación

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?