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

Posted 2023-02-16

【中文标题】vue：从数组内的对象访问特定数组

【英文标题】：vue: access a specific array from an object inside an array

【发布时间】：2021-05-24 06:19:01

【问题描述】：

我只想在单个页面中显示 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 数组中专门获取一个类别，具体取决于用户单击的类别。有人可以告诉我实现目标的最佳做法是什么？我已经阅读了 *** 中的所有类似问题，但在我的情况下它不起作用。非常感谢。

【参考方案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>

【讨论】：

非常感谢您的回答，非常感谢。但是，我有一个问题，我不太了解v-on:click="selectedCategory = 'somecategoryname'" 这一部分，特别是'somecategoryname'。这是什么意思？抱歉，我对 Vue 有点陌生..

谢谢！我只是编辑了我的问题。无论如何，如果用户点击来自不同的页面，这是否意味着我应该使用 vuex 存储 selectedcategory 的值？

是的。这是沟通两个不同页面的最简单、最正确的方式。