时间戳

首页 > 解决方案 > 为什么数据：Variable 对 Vue 中的 computed: property 中的 Variable 是反应性的

vuejs2 - 为什么数据：Variable 对 Vue 中的 computed: property 中的 Variable 是反应性的

问题描述

我可能做错了什么，但我不明白以下结果。我从服务器获取产品数组（按名称排序）。现在我需要价格滑块的最低和最高价格，以便我使用计算属性。之后，完整的产品数组按价格排序，我不明白为什么？

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

也许任何人都有一个想法来解决它。

感谢时间和帮助。

标签： vuejs2

解决方案

这里有两个原因（与 Vue 无关 - 只是普通的旧 JavaScript）：

  1. Array 是通过引用处理的类型，因此您的局部products变量指向相同的数组this.products
  2. Array.prototype.sort()对数组进行就地排序（不创建新数组）

简单的解决方案是使用扩展运算符创建一个新数组。而不是var products = this.products，使用var products = [...this.products]. 这将创建一个与原始数组具有相同元素的全新数组...

forEach虽然您同时需要最小值和最大值，但如果使用 扫描源数组、同时计算两个值并返回一个像这样的简单对象，那么在不进行任何排序的情况下实现这个计算属性会好得多{ minPrice: xx, maxPrice: yy }

推荐阅读