javascript - Vue中满足一定条件的嵌套值过滤数组

Question

我正在尝试过滤包含嵌套对象数组的数组。我希望 v-for 只显示满足特定条件的对象。我创建了一个 JSfiddle Click Here

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

我只想显示未回答问题的参与度。我使用 bool 值来表示问题是否已回答。

这是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>元素只显示未回答的问题。 (这是错误的做法，我发现:see lint error here。您不应该在同一元素上使用 v-if 和 v-for。)

正确: 在这种情况下，扩展您的 filteredQuestions计算值函数只返回 questions没有答案。 (现在您只是基于此过滤参与，但仍会返回所有问题。)

您的计算值函数可以是:

filteredQuestions() {
    return this.engagements
        // Return a modified copy of engagements..
        .map((engagement) => {
            // ..with all answered questions filtered out..
            engagement.questions = engagement.questions.filter((question) => question.answered === 0);
            return engagement;
        })
        // ..and only return engagements that have (unanswered) questions left
        .filter((engagement) => engagement.questions.length !== 0);
}