Hola estoy intentando hacer una lista de características de países, pero obtengo la lista de paises de una API, ahora quiero que al darle clic a cualquier país me salga información del país (Esto también me lo da la api). Intente con vue click pero debo mostrar la información en otra página, así que estoy con Vue router, pero creo que no lo estoy implementando bien, por que me dice que el método VM no está definido. Más o menos quiero saber si voy por un buen camino de lo quiero, soy nueva en Vue
este es mi codigo
const Home = { template: '<div>Home</div>' } const Foo = { template: '<div>Foo</div>' } const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/foo', component: Foo } ] }); Vue.component('countries-list', { template: `<form> <div class="topBar"> <input id="input-search" type="text" class="form-control" v-model="textSearch" placeholder='Search...'> <div class="panel panel-default"> <div class="panel-heading"> <li v-for="country in countriesfilter"> <img v-bind:src="country.flag" v-on:click="vm.greet" alt="" width="30px"> <router-link to="/foo">/{{countries.name}}}</router-link> </li> </div> </div> </div> </form>`, data: function () { return {textSearch:""}; }, props: ['countries2'], computed: { countriesfilter: function () { var countries_array= this.countries2; var textSearch=this.textSearch; if (textSearch==="") { return countries_array; } textSearch=textSearch.trim().toLowerCase(); countries_array=countries_array.filter(function(cnt){ if (cnt.name.toLowerCase().indexOf(textSearch)!= -1) { return cnt; } }) return countries_array; } } // mostrar: function(p_countries){ // p_countries.seleccionado = true; // } }); Vue.component('countries-details', { template: ` <div id="list-countries" v-if="countriesFilter && countriesFilter.length"> <div class="panel panel-default" v-for="country of countriesFilter"> <div class="col-md-6">Population: <strong >{{country.population | format-thousands}}</strong></div>` , }); var vm = new Vue({ router, el: '#app', data: { countries: [] }, created: function() { axios.get('https://restcountries.eu/rest/v2/all') .then(function(response) { vm.countries=response.data; //console.log(response); console.log(response.data); //console.table(response.data.results); }); } });
Gracias