Why data: Variable is reactive to a Variable in computed: property in Vue

Question

It's possible that I'm doing something wrong, but I do not understand the following result. I get the product Array (sorted by name) from the server. Now I need the lowest and highest price for a price slider so that I'm using computed properties. After that, the complete product array is sorted by price and I can't understand why?

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

Maybe anyone has an idea to figure it out.

Thx for time and help.

Thoshitha Kaduruwewa · Accepted Answer · 2021-01-13 13:42:10Z

3

Two reasons in play here (nothing to do with Vue - just plain old JavaScript):

Array is the type handled by reference so your local products variable is pointing to the same array as this.products
Array.prototype.sort() sorts the array in-place (not creating new array)

The easy solution is to use the spread operator to create a new array. Instead of var products = this.products, use var products = [...this.products]. This will create a completely new array with the same elements as the original array...

Although as you need min and max value at the same time, it would be really much better to implement this computed prop without any sorting just by scanning the source array with forEach, computing both values at the same time, and returning a simple object like this { minPrice: xx, maxPrice: yy }

edited Jan 13, 2021 at 13:42

Thoshitha Kaduruwewa

437 bronze badges

answered Jan 13, 2021 at 13:12

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why data: Variable is reactive to a Variable in computed: property in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related