Как в Vue отсортировывать массив по алфавиту определенного свойства, если определенный checkbox true?

Question

[YakovSpb]

<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

[0xD34F]

Сделайте вычисляемое свойство, которое в зависимости от состояния чекбокса будет представлять массив в дефолтном порядке или алфавитном:

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

Comments

[YakovSpb]

Т.е. два разных массивов выводить? так?

<div v-if="sorting" class="items">
					<div 
					v-for="(dog, idx) in sortedDogs" 

				<div v-else class="items">
					<div 
					v-for="(dog, idx) in allDogs"

[YakovSpb]

eeeeeeeeeeeeeeeeee dude, получилось)