Question

好的，所以我试图过滤一个包含嵌套对象数组的数组。我希望v-for仅显示满足特定条件的那些对象。我创建了一个JSfiddle Click Here

让我感到困惑的部分是，每个接合可能包含1个对象或3个对象，而且我不知道如何检查每个嵌套对象的值条件。

我只想显示参与中未回答的问题。我使用布尔值表示问题是否得到回答。

这是v-for

<div id="app">
  <h2>Engagements:</h2>
  <div>
    <div v-for="(engagment, index) in filteredQuestions" :key="index">
      <li v-for="question in engagment.questions" :key="question.id">
        <span>{{ question.id }},</span>
        <span> {{ question.question}} </span>
        <span><input type="checkbox" v-model="question.answered"></span>
      </li>
    </div>
  </div>
</div>

这是脚本和数据

new Vue({
  el: "#app",
  data: {
    engagements: [
      { 
        id: 1,
        text: "1040", 
        questions: [
            {
            id: 1,
            question: 'this is a question',
            answered: 0
          },
          {
            id: 2,
            question: 'this is a question',
            answered: 1
          },
        ]
      },
      { 
        id: 2,
        text: "1040", 
        questions: [
            {
            id: 3,
            question: 'this is a question',
            answered: 0
          },
        ]
      },
    ]
  },
  computed: {
    filteredQuestions() {
        const engagement =  this.engagements.filter((engagement) => {
            return engagement.questions.filter((question) => question.answered === 0)
        })
        return engagement
    }
  }
})

当前，无论我如何格式化filteredQuestions方法，它都将呈现整个列表或不显示任何内容。请查看我在本文顶部包含的jsfiddle！在此先感谢！

Answer 1

您要基于engagements过滤出1个或多个未回答的问题，但是v-for仍会在这些参与中呈现所有问题。

在v-if="question.answered==0"元素中添加<li>，仅显示未回答的问题。

您的计算函数可能是：

filteredQuestions() {
    return this.engagements.filter((engagement) => {
        return engagement.questions.filter((question) => question.answered === 0).length
    })
}

Answer 2

如果您尝试查找第一级的数组和数组中的嵌套项，则上述选项不起作用

例如，参与项的名称和问题子项的名称，因为过滤器将进行最后匹配

如果您要在嵌套数组上查找匹配项（例如名称），则应执行下一个代码

  return this.content.filter((sub) => {
      //for save the status
      let show = false
      //find in nested: themes
      sub.Themes = sub.Themes.filter((theme) => {
        if (reg.test(theme.name)) {
          show = true
          return true
        }
        return false
      })
      //if was finded match in themes show the subject or if the subject name match too
      if (show === true || reg.test(sub.name)) {
        return true
      }
      return false
    })

通过满足Vue中特定条件的嵌套值过滤数组

2 个答案: