vue: access a specific array from an object inside an array

Question

I want to show only one of the questions array in a single page, depending on which category the user picks.

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 file

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

My template code shows a blank space and there's nothing in the console so I'm confused where the mistake is. The problem is I don't know how to specifically get only one category from the faqData array, depending on what category the user clicks. Can someone tell me what is the best practice to achieve my goal? I have read all the similar questions in StackOverflow but it didn't work in my case. Thank you so much.

Answer 1

Best way (and a best practice, I guess), it to implement computed prop with name like, for example selectedFaqQuestion :

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

and use it into v-for:

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

Of course, to do so, you need to implement new data prop selectedCategory , where you are going to store selected category, on user's click:

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

So, as you mentioned, you need to handle user click, when going to see any questions based on selected category. To handle its click, you need to use v-on:click . To pass new value of selected category you need to update it: selectedCategory = 'somecategoryname'

'somecategoryname' means something from your faqData prop 'name', for example 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>