Recibo y visualizo datos de una API ( https://restcountries.com/ ), pero tengo problemas para vincular cada entrada de la tabla a su propia página con la etiqueta de enlace del enrutador. No pasa nada, no hay errores, no hay texto vinculado.

 <template> <div> <b-table responsive head-variant="dark" striped hover :items="countries" :fields="headings"> <template #cell(name)="data"> <router-link :to="{name: 'country', params: {country: country.name.official}}"> {{ data.value }} </router-link> </template> </b-table> </div> </template> <script> import axios from '@/config' export default { name: 'AllCountries', components: {}, data() { return { headings: [ { key: 'name.common', sortable: true }, { key: 'capital', sortable: true }, ], countries: [] } }, mounted() { axios.get('/all') .then(response => { console.log(response.data) this.countries = response.data }) .catch(error => console.log(error)) } } </script>

Si elimino .common de la clave 'nombre', el enlace del enrutador puede funcionar, pero mostrará todas las variaciones del nombre del país en lugar de solo el nombre 'común' que quiero. Además, si se elimina .common, el enlace del enrutador no funciona como se muestra aquí. Obtengo errores como:

"Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'nombre')" "La propiedad o el método "país" no está definido en la instancia, pero se hace referencia durante el procesamiento".

Aunque no obtengo estos errores con este enlace de enrutador exacto en otro lugar, y el 'nombre' no se definió en esos archivos), la única forma en que obtuve el enlace del enrutador para vincular es con estos parámetros: { id: data.item._id } (aunque no enlaza con nada (intenta enlazar con '/undefined?fullText=true'))