Показывать элемент только один раз в цикле v-for

Question

У меня есть следующий объект, и я хочу использовать значение в качестве заголовка раздела, которое я хочу использовать в цикле, но показывать только один раз.

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'
  }
},

Я хочу использовать происхождение как способ группировки контента и показа заголовка над контентом. Я устал один раз, но это больше не работает в циклах.

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

Answer 1

Похоже, вы, по сути, хотите, чтобы дочерний контент фильтровался по происхождению. Простой способ сделать это - отфильтровать данные children внутри вычисляемого свойства следующим образом:

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/vue@2.5.16/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>

Как насчет этой стратегии? https://jsfiddle.net/3c1jakyc/