title: Hyperlinking table data from API with vue-router
body: <p>I'm taking in and displaying data from an API (<a href="https://restcountries.com/" rel="nofollow noreferrer">https://restcountries.com/</a>), but I'm having trouble hyperlinking each table entry to its own page with the router-link tag. Nothing happens, no errors, no linked text.</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;b-table responsive head-variant=&quot;dark&quot; striped hover :items=&quot;countries&quot; :fields=&quot;headings&quot;&gt;
              &lt;template #cell(name)=&quot;data&quot;&gt;
                  &lt;router-link :to=&quot;{name: 'country', params: {country: country.name.official}}&quot;&gt;
                      {{ data.value }}
                  &lt;/router-link&gt;
              &lt;/template&gt;
          &lt;/b-table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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 =&gt; {
              console.log(response.data)
              this.countries = response.data
          })
          .catch(error =&gt; console.log(error))
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>If I remove the .common from the key 'name', router-link can work, but it will display all variations of country name rather than just the one 'common' name that I want. Also if .common is removed, the router-link does not work as it's shown here I get errors such as:</p>
  <p>&quot;TypeError: Cannot read properties of undefined (reading 'name')&quot;
  &quot;Property or method &quot;country&quot; is not defined on the instance but referenced during render.&quot;</p>
  <p>Though I don't get these errors with this exact router-link elsewhere, and 'name' wasn't defined in those files), the only way I've gotten the router-link to link is with these params: <code>{ id: data.item._id }</code>(though it links to nothing (it tries to link to '/undefined?fullText=true'))</p>