How in Vue to sort an array alphabetically by a certain property if a certain checkbox is true?

Question

Vue.js

<div v-else class="app-content">
        <div class="items">
          <div 
          v-for="(dog, idx) in allDogs" 
          :key="idx"
          class="card"
          >
          <img :src="dog.url" alt="alt">
          <div class="card__name">{{dog.breeds[0].name}}</div>
        </div>
      </div>

    </div>

Answer 1

Make a computed property that, depending on the state of the checkbox, will represent the array in default or alphabetical order:

<input type="checkbox" v-model="sort">
<div v-for="dog in sortedDogs">

data: () => ({
  sort: false,
}),
computed: {
  sortedDogs() {
    return this.sort
      ? [...this.allDogs].sort((a, b) => a.breeds[0].name.localeCompare(b.breeds[0].name))
      : this.allDogs;
  },
},