Блог

Возможно, я делаю что-то не так, но я не понимаю следующего результата. Я получаю массив продуктов (отсортированных по названию) с сервера. Теперь мне нужна самая низкая и самая высокая цена для ползунка цен, чтобы я использовал вычисляемые свойства. После этого весь ассортимент товаров сортируется по цене, и я не могу понять, почему?

     data:
      products: []
      ...
      methods: {
        loadProducts() {
          ...
          this.products = response.data.elements; //array is sorted correct by name
        }
      },
      computed: 
        maxPriceCalc: function() {
          var products = this.products;
          if(productss.length > 0) {
            var maxPrice = productss.sort(compare); //at this point - this.products is sorted by price too
            return maxPrice[0].calculatedPrice.totalPrice;
          }
          function compare(a, b) {
            if (a.calculatedPrice.totalPrice > b.calculatedPrice.totalPrice)
                return -1;
            if (a.calculatedPrice.totalPrice < b.calculatedPrice.totalPrice)
                return 1;
            return 0;
          }
          ...
 

Может быть, у кого-нибудь есть идея разобраться в этом.

Спасибо за время и помощь.

Здесь играют роль две причины (ничего общего с Vue — просто старый JavaScript):

1. Array — это тип, обрабатываемый ссылкой, поэтому ваша локальная products переменная указывает на тот же массив, что и this.products
2. Array.prototype.sort() сортирует массив на месте (не создавая новый массив)

Простое решение — использовать оператор spread для создания нового массива. Вместо var products = this.products этого используйте var products = [...this.products] . Это создаст совершенно новый массив с теми же элементами, что и исходный массив…

Хотя, поскольку вам нужно минимальное и максимальное значение одновременно, было бы намного лучше реализовать этот вычисляемый реквизит без какой-либо сортировки, просто сканируя исходный массив forEach , вычисляя оба значения одновременно и возвращая простой объект, подобный этому { minPrice: xx, maxPrice: yy }