VueJS - 从数据中自动创建 A-Z 字母列表答案

【问题标题】：VueJS - Auto create a A-Z letters list from the dataVueJS - 从数据中自动创建 A-Z 字母列表
【发布时间】：2019-07-16 17:50:35
【问题描述】：

是否可以从 API 和 Vue 中的数据创建 A-Z 字母列表 (like this)，以便能够确定数据中的属性是否包含以哪个字母开头的名称。如果数据不包含特定的字母名称，则从字母锚标记中删除/禁用 href 属性。

在链接的示例中，缺少字母 K、X 和 Z，因为它们没有数据

JSON

[
    {
        "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"
    }
]

组件

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()
  }
}

因此，根据返回的数据，只有字母“A”、“F”和“J”应该是可点击/显示的。

【问题讨论】：

标签： vue.js

【解决方案1】：

我设法做到了，不幸的是，它需要作者数组和条件函数位于 Vue 组件之外，因为我找不到如何将参数传递给计算值但是由于我是 vue 新手（甚至没有读完介绍），我相信一定有更好的解决方案

编辑：用methods 找到了在组件中使用函数的方法，然后我也可以在组件中移动数据

let a = new Vue({
  el: "#selector",
  data: {
    authors: [{"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"}]
  },
  computed: {
    // there have to be a way to get this array without doing it like this but I don't know it ^^
    letters() {
      let letters = []
      for(let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {letters.push(String.fromCharCode([i]))}
      return letters
    }
  },
  methods: {
    // you may add a toUpperCase()/toLowerCase() if you're not sure of the capitalisation of you datas
    isALink(letter) {
      return this.authors.some(aut => aut.name.startsWith(letter))
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="selector">
  <template v-for="letter in letters">
    <a v-if="isALink(letter)" :href="letter">{{ letter }}</a>
    <a v-else>{{ letter }}</a>
  </template>
</div>

【讨论】：

【解决方案2】：

您可以将唯一名称设置为 dom 的 id。当您点击字母 X 时，只需获取以 X 开头的名字，然后使用 getElementById 匹配 dom 并滚动到 dom。

【讨论】：