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

Question

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

让我困惑的部分是每个参与可能有 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！

标签： javascriptvue.js

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