title: VueJS - Auto create a A-Z letters list from the data
body: <p>Is it possible to create a A-Z letters list (<a href="https://www.bls.gov/bls/topicsaz.htm" rel="nofollow noreferrer">like this</a>) from the data from a API and Vue to be able to determine if a property in a data contains a name that starts with what letter. If the data doesn't contain a specific letter name then remove/disable the href attribute from the letter anchor tag.</p>
  
  <p>In the linked example, letters K, X and Z are missing coz they don't have the data</p>
  
  <p>JSON</p>
  
  <pre><code>[
      {
          "id": 77,
          "link": "http://my-site/cosmoquotes/authors/anonymous/",
          "name": "Anonymous",
          "slug": "anonymous"
      },
      {
          "id": 72,
          "link": "http://my-site/authors/ferdinand-marcos/",
          "name": "Ferdinand Marcos",
          "slug": "ferdinand-marcos"
      },
      {
          "id": 75,
          "link": "http://my-site/authors/john-f-kennedy/",
          "name": "John F. Kennedy",
          "slug": "john-f-kennedy"
      },
      {
          "id": 67,
          "link": "http://my-site/authors/john-maxwell/",
          "name": "John Maxwell",
          "slug": "john-maxwell"
      }
  ]
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>export default {
    data() {
      return {
        authorsRequest: {
          type: 'authors',
          params: {
            per_page: 100
          }
        },
      }
    },
  
    computed: {
      authors () {
        return this.$store.getters.requestedItems(this.authorsRequest)
      },
    },
    methods: {
      getAuthors() {
        return this.$store.dispatch('getItems', this.authorsRequest)
      },
    },
    created() {
      this.getAuthors()
    }
  }
  </code></pre>
  
  <p>So as per the returned data, only the letters 'A', 'F' and 'J' should be clickable/displayed.</p>