CODEWITHSUNDEEP
vue.jsvuejs2
UXCODA
UXCODA

Reputation: 1226

Show item only once in v-for loop

I have the following object and I want to use a value as a section title which I want to use in a loop but show only once.

children: {
  child_1: {
    id: 'child_1',
    name: 'Ruth Ann Morgan',
    gender: 'female',
    birth_year: '1999',
    parentage: 'our_child',
    dependency: 'not_dependent'
  },
  child_2: {
    id: 'child_2',
    name: 'James Nico Morgan',
    gender: 'male',
    birth_year: '2012',
    parentage: 'our_child',
    dependency: 'is_dependent'
  },
  child_3: {
    id: 'child_3',
    name: 'Dave Ash Moran',
    gender: 'male',
    birth_year: '1996',
    parentage: 'partners_child',
    dependency: 'is_dependent'
  }
},

I want to use parentage as a way of grouping the content together and show the title above the content. I've tired v-once but that does not work within loops anymore.

<div v-for="child in children" :key="child">
    <div v-if="child.parentage == 'our_child'">
        <p class="text-muted text-xs font-weight-medium mb-0 kern-1" v-once>Our Children</p>
        <a href="#" class="d-flex flex-row justify-content-between w-100 text-sm">
          <div>
            <strong v-text="child.name"></strong>, was born in <span v-text="child.birth_year"></span>, and <span v-text="child.gender"></span> is <span v-text="child.dependency"></span>
           </div>
           <div class="d-none d-lg-block text-sm text-uppercase brand-primary-color font-weight-bold" :id="child.id" @click.prevent="getChildId(child.id) + showMyChildForm()">Edit</div>
                </a>
            </div>

    <div class="mt-2" v-if="child.parentage == 'partners_child'">
         <p class="text-muted text-xs font-weight-medium mb-0 kern-1" v-once>Partner's Children</p>
         <a href="#" class="d-flex flex-row justify-content-between w-100 text-sm">
       <div>
          <strong v-text="child.name"></strong>, was born in <span v-text="child.birth_year"></span>, and <span v-text="child.gender"></span> is <span v-text="child.dependency"></span>
        </div>
        <div class="d-none d-lg-block text-sm text-uppercase brand-primary-color font-weight-bold" :id="child.id" @click.prevent="getChildId(child.id) + showMyChildForm()">Edit</div>
        </a>
    </div>
</div>

Upvotes: 0

Views: 2775

Answers (1)

Mahmud Adam
Mahmud Adam

Reputation: 3579

It seems like you essentially want the children content filtered based on parentage. An easy way to do this is filtering the children data inside a computed property like so:

computed: {
  showOurChildren() {
    return this.children.filter(child => child.parentage === 'our_child')
  },
  showPartnersChildren() {
    return this.children.filter(child => child.parentage === 'partners_child')
  }
}


new Vue({
  el: "#app",
  data: {
    children: [{
        id: 'child_1',
        name: 'Ruth Ann Morgan',
        gender: 'female',
        birth_year: '1999',
        parentage: 'our_child',
        dependency: 'not_dependent'
      },
      {
        id: 'child_2',
        name: 'James Nico Morgan',
        gender: 'male',
        birth_year: '2012',
        parentage: 'our_child',
        dependency: 'is_dependent'
      },
      {
        id: 'child_3',
        name: 'Dave Ash Moran',
        gender: 'male',
        birth_year: '1996',
        parentage: 'partners_child',
        dependency: 'is_dependent'
      }
    ]
  },
  computed: {
    showOurChildren() {
      return this.children.filter(child => child.parentage === 'our_child')
    },
    showPartnersChildren() {
      return this.children.filter(child => child.parentage === 'partners_child')
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h3 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <h3>Our children</h3>
  <div v-for="child in showOurChildren">
    {{ child.name }}
  </div> <br>
  <h3>Partner's children</h3>
  <div v-for="child in showPartnersChildren">
    {{ child.name }}
  </div>

</div>

How about this strategy? https://jsfiddle.net/3c1jakyc/

Upvotes: 1

Related Questions