Сортировка предварительно обработанного и сопоставленного списка с помощью v-for в раскрывающемся меню

Question

У меня такая проблема: я визуализирую список, полученный вызовом API, с помощью v-for, и если вы пишете в форму, отображаются только те элементы, которые соответствуют ключу, записанному в форму.

Теперь мне нужно отсортировать эти элементы по имени и по цене, используя раскрывающийся список с кнопками

возможно ли это?

Извините за внешнюю ссылку, но у меня возникли проблемы с вставкой кода в StackOverflow , возможно, из-за vue -boostrap

HTML часть

часть кода

    <div>
      <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
        <b-dropdown-item>Default Sort</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item @click="sortByName">Sort by Name</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item>Sot by Price</b-dropdown-item>
      </b-dropdown>
    </div>
<div class="d-flex flex-wrap justify-content-center">
      <div class="card" v-for="product in filteredCatalogue" :key="product.id">
        
        <img class="product pimage" :src="product.images.small" />
        <hr class="product black-line" />
        <h5 class="product name text-uppercase">{{product.name}}</h5>
        <h5 class="product short-description">{{product.descriptions.short}}</h5>
        <h5
          class="product price"
          v-if="product.price.currency_symbol=='&#8364;'"
        >€ {{product.price.sell}}</h5>
        <b-button id="button-shop" squared variant="warning">
          <i class="fas fa-shopping-cart"></i>
          <div id="yellow-button-text">ADD TO CART</div>
        </b-button>
      </div>
    </div>

<form class="form-inline justify-content-center">
      <div class="form-group">
        <input
          class="form-control bg-white border border-secondary"
          type="text"
          v-model="key"
          placeholder="Cerca tra i prodotti"
          value
          autocomplete="off"
        />
      </div>
    </form>

import axios from "axios";
import { cacheAdapterEnhancer } from "axios-extensions";

export default {
  data() {
    return {
      catalogue: [],
      key: ""
    };
  },

  created() {
    axios
      .get(
        API_URL,
        cacheAdapterEnhancer
      )
      .then(response => {
        this.catalogue = response.data;
        console.log(this.catalogue);
      })
      .catch(error => console.log(error));
  },
  computed: {
    filteredCatalogue: function() {
      return this.catalogue.filter(product => {
        return product.name.toLowerCase().match(this.key.toLowerCase());
      });
    }
  }
};

Answer 1

Проверить метод сортировки в массиве JavaScrtipt здесь .