vue：从数组内的对象访问特定数组

Question

我只想在单个页面中显示 questions 数组中的一个，具体取决于用户选择的类别。

faqData = [
  {
    name: "first-category",
    questions: [
      {
        id: 1,
        question: "First question?",
        answer: "First Answer"
      },
      {
        id: 2,
        question: "Second question?",
        answer: "blablablabla"
      }
    ]
  },
  {
    name: "second-category",
    questions: [
      {
        id: 1,
        question: "First question?",
        answer: "First Answer"
      },
      {
        id: 2,
        question: "Second question?",
        answer: "blablablabla"
      }
    ]
  },
  {
    name: "third-category",
    questions: [
      {
        id: 1,
        question: "First question?",
        answer: "First Answer"
      }
    ]
  }
];

vue 文件

<div class="accordion" role="tablist" v-for="eachQuestion in questionList.questions" :key="eachQuestion.id">
    <FAQCollapses v-bind:eachQuestion="eachQuestion" />
</div>

//script
data () {
        return {
            questionList: faqData
        }
}

我的模板代码显示一个空格，并且控制台中没有任何内容，所以我很困惑错误在哪里。问题是我不知道如何从faqData 数组中专门获取一个类别，具体取决于用户单击的类别。有人可以告诉我实现目标的最佳做法是什么？我已经阅读了 StackOverflow 中的所有类似问题，但在我的情况下它不起作用。非常感谢。

Answer 1

最好的方法（我猜也是一种最佳实践），它可以实现具有类似名称的计算道具，例如 selectedFaqQuestion:

computed: {
    selectedFaqQuestion () {
        return selectedCategory ? this.faqData.find(category => category.name === this.selectedCategory).questions : []
    }
}

并将其用于 v-for:

<div v-for="eachQuestion in selectedFaqQuestion" :key="eachQuestion.id">
    <FAQCollapses v-bind:eachQuestion="eachQuestion" />
</div>

当然，要做到这一点，您需要实现新的数据道具selectedCategory，您将在用户点击时存储所选类别：

data () {
    return {
        questionList: faqData,
        selectedCategory: null
    }
}

因此，正如您所提到的，当您要查看基于所选类别的任何问题时，您需要处理用户点击。要处理它的点击，您需要使用v-on:click。要传递所选类别的新值，您需要对其进行更新：selectedCategory = 'somecategoryname'

'somecategoryname' 表示来自您的 faqData 道具“名称”的内容，例如 first-category：

<div> Please, peek FAQ category to show answers: 
  <span v-on:click="selectedCategory = 'first-category'"> First category </span>
  <span v-on:click="selectedCategory = 'second-category'"> Second category </span>
</div>