Сортировка списка. Vue

Question

Не понимаю как по кнопке отсортировать по рейтингу <p>Rating: {{ review.rating }}</p> от меньшего к большему.

<div>   
        <ul>
            <span class="tab"
                :class="{ activeTab: selectedTab === tab }"
                v-for="(tab, index) in tabs"
                @click="selectedTab = tab"
            >
                {{ tab }}
            </span>
        </ul>
        <div v-show="selectedTab === 'Reviews'">
            <div >
                <p v-if="!reviews.length">There are no reviews yet.</p>
                <ul v-else>
                    <li v-for="review in reviews">
                        <p>{{ review.name }}</p>
                        <p>Rating: {{ review.rating }}</p>
                        <p>{{ review.review }}</p>
                        <p>Recommend: {{ review.recommend }}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div v-show="selectedTab === 'Make a Review'">
            <product-review></product-review>
        </div>
    </div>

Answer 1

Вы можете создать computed свойство sortedReviews и выводить его.

<template>
  <div>
    <p v-if="!reviews.length">There are no reviews yet.</p>
    <ul v-else>
      <li v-for="review in sortedReviews">
        <p>{{ review.name }}</p>
        <p>Rating: {{ review.rating }}</p>
        <p>{{ review.review }}</p>
        <p>Recommend: {{ review.recommend }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
  import { computed } from 'vue';

  const reviews = [
    { name: 'rew 1', rating: 2.7, review: 'review 1 text', recommend: 'recommendations' },
    { name: 'rew 2', rating: 4.2, review: 'review 2 text', recommend: 'recommendations' },
    { name: 'rew 3', rating: 3.4, review: 'review 3 text', recommend: 'recommendations' },
  ];

  const sortedReviews = computed(() =>
    reviews.sort(({ rating: a }, { rating: b }) => a - b)
  );
</script>

При использовании Options API:

<script>
  export default {
    data() {
      return {
        reviews: [
          { name: 'rew 1', rating: 2.7, review: 'review 1 text', recommend: 'recommendations' },
          { name: 'rew 2', rating: 4.2, review: 'review 2 text', recommend: 'recommendations' },
          { name: 'rew 3', rating: 3.4, review: 'review 3 text', recommend: 'recommendations' },
        ],
      };
    },
    computed: {
      sortedReviews() {
        return this.reviews.sort(({ rating: a }, { rating: b }) => a - b);
      },
    },
  };
</script>

БЛОГ НА HUSL

Сортировка списка. Vue

Ответы (1 шт):