vue循环遍历对象内部的数组答案

【问题标题】：vue loop through array inside objectvue循环遍历对象内部的数组
【发布时间】：2021-05-21 11:03:28
【问题描述】：

我想在对象内循环一个数组。这是我的code。我想要实现的是，例如，我单击How to make pancake? 按钮，它会将我重定向到另一个页面，其中显示（引导）accordion 充满了来自这个 js 文件的问题

export const questionList = [
  {
    slug: "how-to-make-pancake",
    title: "How to make pancake?",
    questions: [
      {
        id: 1,
        question: "First question?",
        answer: "First Answer"
      },
      {
        id: 2,
        question: "Second question?",
        answer: "blablablabla"
      }
    ]
  },
  {
    slug: "how-to-make-pancake2",
    title: "How to make pancake2?",
    questions: [
      {
        id: 1,
        question: "First question?",
        answer: "First Answer"
      },
      {
        id: 2,
        question: "Second question?",
        answer: "blablablabla"
      }
    ]
  },
  {
    slug: "how-to-make-pancake3",
    title: "How to make pancake3?",
    questions: [
      {
        id: 1,
        question: "First question?",
        answer: "First Answer"
      },
      {
        id: 2,
        question: "Second question?",
        answer: "blablablabla"
      }
    ]
  }
];

在手风琴.vue中，我认为这行代码不起作用

data() {
    return {
      questionslist: questionList.questions,
    };
  }

我的问题是，如何访问questionList 中每个对象中的问题数组？如果这有点令人困惑并且我的语言不好，我很抱歉。非常感谢。

【问题讨论】：

由于 'questionList' 是一个数组，您不能将 'questions' 作为 'questionList.questions' 访问。你需要'questionList[arrayIndex].questions'。现有答案之一可能会满足您的需求，但只是想澄清一下。

标签： javascript vue.js

【解决方案1】：

你可以使用 flat()：

data() {
  return {
    questionsList: questionList.map(q => q.questions).flat();
  };
}

【讨论】：

它给了我一个错误You may need an additional loader to handle the result of these loaders. | data () { | return { > questionsList: questionList.map(q => q.questions).flat(); | } | } 我需要什么样的装载机？

【解决方案2】：

所以您想将所有questions 数组扁平化为一个数组吗？你可以这样做：

data() {
  return {
    questionsList: questionList.reduce((res, obj) => {
      return [...res, ...obj.questions];
    }, [])
  };
}

【讨论】：