[Vuejs]-In a Vue loop, how to use a v-if related to the highest number value

by

2👍

You can use computed property to get indexes of highest lengths of the "kittens" arrays:

new Vue({
  el: "#app",
  data() {
    return {
      cats: [
        {"name": "Tom", "kittens": [{"name": "Dan"}]},
        {"name": "Bob", "kittens": [{"name": "Lil"}, {"name": "Sue"}, {"name": "Alf"}]},
        {"name": "Kitty", "kittens": [{"name": "Lil"}, {"name": "Sue"}, {"name": "Alf"}]},
        {"name": "Ketty", "kittens": [{"name": "Lil"}]}
      ],
    }
  },
  computed: {
    biggestNumber: function() {
      return this.maxIndices(this.cats.map(a => a.kittens.length));
    }
  },
  methods: {
    maxIndices(arr) {
      let maxLength = Math.max(...arr)
      return arr.reduce((m, c, i) => c === maxLength ? m.concat(i) : m,[]);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<li v-for="(cat, i) in cats" :key="cat.name">
  {{ cat.name }}
  <span v-if="biggestNumber.includes(i)">Top parent</span>
</li>
</div>
👤Nikola Pavicevic

2👍

While a computed is the right way to go, @Nikola’s answer seems unnecessarily complex.
IMHO, the maxIndices method is not needed.

new Vue({
  el: "#app",
  data() {
    return {
      cats: [
        {"name": "Tom", "kittens": [{"name": "Dan"}]},
        {"name": "Bob", "kittens": [{"name": "Lil"}, {"name": "Sue"}, {"name": "Alf"}]},
        {"name": "Kitty", "kittens": [{"name": "Lil"}, {"name": "Sue"}, {"name": "Alf"}]},
        {"name": "Ketty", "kittens": [{"name": "Lil"}]}
      ],
    }
  },
  computed: {
    mostKittens() {
      return Math.max(...this.cats.map(({ kittens }) => kittens.length));
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<div id="app">
  <li v-for="cat in cats" :key="cat.name">
    {{ cat.name }}
    <span v-if="cat.kittens.length === mostKittens">[Top parent]</span>
  </li>
</div>

Both the above solution and Nikola’s answer have one small problem, though. They will both break in case any of your cats doesn’t have a kitten’s prop.

If you’re 100% sure such a cat will never be fed to your component, you don’t need the rest.
But, in my estimation, guarding against bad data is always a good idea, so here’s how I’d write the above if I had to guard against kitten-less cats:

new Vue({
  el: "#app",
  data() {
    return {
      cats: [
        {"name": "Tom", "kittens": [{"name": "Dan"}]},
        {"name": "Bob", "kittens": [{"name": "Lil"}, {"name": "Sue"}, {"name": "Alf"}]},
        {"name": "Kitty", "kittens": [{"name": "Lil"}, {"name": "Sue"}, {"name": "Alf"}]},
        {"name": "Ketty", "kittens": [{"name": "Lil"}]},
        {"name": "Stray cat"}
      ],
    }
  },
  computed: {
    mostKittens() {
      return Math.max(
        ...this.cats.map(({ kittens }) => kittens?.length || 0)
      );
    }
  },
  methods: {
    isTopParent(cat) {
      return cat.kittens?.length === this.mostKittens;
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<div id="app">
  <li v-for="cat in cats" :key="cat.name">
    {{ cat.name }}
    <span v-if="isTopParent(cat)">[Top parent]</span>
  </li>
</div>
👤tao

Leave a comment