在Vue中通过满足特定条件的嵌套值过滤数组 [英] Filter array by nested value that meets certain condition in Vue

问题描述

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

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

我只想显示未回答问题的互动.我使用一个布尔值来表示问题是否得到回答.

这是 v-for

<h2>参与:</h2><div><div v-for="(engagment, index) in filteredQuestions";:key=索引"><li v-for="question in engagment.questions";:key="question.id"><span>{{ question.id }},</span><跨度>{{ question.question}} </span><span><input type="checkbox"v-model=question.answered"></span>

这是脚本和数据

new Vue({el:#app"，数据: {参与:[{编号:1，文字:1040"，问题: [{编号:1，问题:'这是一个问题'，回答:0},{编号:2，问题:'这是一个问题'，回答:1},]},{编号:2，文字:1040"，问题: [{编号:3，问题:'这是一个问题'，回答:0},]},]},计算:{过滤问题(){const 参与 = this.engagements.filter((engagement) => {返回engagement.questions.filter((question) => question.answered === 0)})回归参与}}})

目前无论我如何格式化 filteredQuestions 方法，它要么呈现整个列表，要么不显示任何内容.请查看我在本文顶部包含的 jsfiddle！

解决方案

您正在过滤 engagements 基于他们有 1 个或多个未回答的问题，但 v-for 仍在呈现这些互动中的所有问题.

错误:将 v-if="question.answered==0" 添加到

元素以仅显示未回答的问题.(这是错误的做法，我发现:在此处查看 lint 错误.您不应在同一元素上使用 v-if 和 v-for.)

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

您的计算值函数可以是:

filteredQuestions() {返回 this.engagements//返回订婚的修改副本...map((参与) => {//.. 过滤掉所有已回答的问题..参与.问题=参与.问题.过滤器((问题)=>问题.回答== 0)；回归订婚；})//..并且只返回有(未回答的)问题的参与.filter((engagement) =>engagement.questions.length !== 0);}

I am trying to filter an Array that contains nested array of Objects. I would like for the v-for to only show those objects that meet certain condition. I have created a JSfiddle Click Here

The part that confuses me is that each enagagement could have 1 object or 3 objects, and I don't know how to check value conditions for each nested object.

I want to only show Engagements with questions that are not answered. I am using a boolean value to represent whether the question is answered or not.

This is the 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>

This is the Script and Data

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

Currently no matter how I format the filteredQuestions method it will either render the entire list or show nothing. Please view the jsfiddle I included at the top of this post!

解决方案

You're filtering the engagements based on them having 1 or more unanswered questions, but the v-for is still rendering all questions inside those engagements.

WRONG: Add v-if="question.answered==0" to the <li> element to only show unanswered questions. (This is wrong practice, I found out: see lint error here. You should not use v-if and v-for on the same element.)

CORRECT: In this case extend your filteredQuestions computed value function to only return questions without answers. (Now you are just filtering the engagements based on that, but still returning all of the questions.)

Your computed value function could be:

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

这篇关于在Vue中通过满足特定条件的嵌套值过滤数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！