为什么我的数据属性被 Vuejs 中的计算属性更新？

Question

I have a computed property ( filteredMeasurementsByAttribute ) that is supposed to provide a filtered version of a data property ( measurementsByAttribute ). However, the changes on the computed property are also taking place on the data property.

The filter is using the data from selectedAttributes (which are the options selected in drop downs on the front end) and then returning the matching data in measurementsByAttribute . This filter is working properly. The issue is that when I run the clearAttribute method which clears the data from selectedAttributes (this part works successfully) the measurementsByAttribute property is the filtered version so I can't get the old data back.

In short, I want to keep an original version of the measurementsByAttribute property so that I clear the selectedAttributes property and have all the original data available for filteredMeasurementsByAttribute to reset the drop down forms.

I've tried saving the data in a regular javascript variable, measurementsByAttributeMaster , and then setting the measurementsByAttribute to the master. Somehow they all end up just having the filtered values.

I've tried changing the way that I'm looping through the data (eg using forEach instead of filter or map) just to see if that was causing it to edit the original data. No luck. I've left the "original" versions using the filter and map in commented out code so you can see both versions.

Any insight or help is very much appreciated.

/**
 * Select Product
 */

function filterMeasurements(attribute, measurementsAvailable) {
    var filteredMeasurements = [];

    attribute.measurements.forEach(function(measurement) {
        if (measurementsAvailable.includes(measurement.id.toString())) {
            filteredMeasurements.push(measurement);
        }
    });
    // return attribute.measurements.filter(function(measurement) {
    //     return measurementsAvailable.includes(measurement.id.toString());
    // });

    return filteredMeasurements;
}

/**
 * Check if the part matches the selected Attributes
 *
 * @param {array} selectedAttributes Array of all the currently selected attributes
 * @param {object} part The part we are checking
 * @retrun {array} the fitlered selectedAttributes
 */
function checkPartAttributes(selectedAttributes, part) {

    var partAttributes = JSON.parse(part.attributes_json);

    // Loop through each selected attribute to ensure there aren't any conflicts
    return selectedAttributes.every(function(measurementID, attributeID) {

        // if no measurement has been selected, it is acceptable
        if (measurementID == "") {
            return true;
        }

        // if the part does have this attribute, it needs to match
        if (attributeID in partAttributes) {
            return partAttributes[attributeID] == measurementID;
        }

        console.log('here');

        // If the part doesn't have this attribute, it is acceptable
        return true;

    });

}

// var SelectSpecifications = require('./components/SelectProduct/SelectSpecifications.vue');

var vm = new Vue({
    el: '#select-product',
    components: {
        SelectSpecifications
    },
    data () {
        return {
            allParts: allParts,
            measurementsByAttribute: measurementsByAttribute,
            selectedAttributes: selectedAttributes,      
        }
    },
    computed: {
        /** 
         * combine all the attributes from the matching parts
         *
         * @return {array} The filtered attributes 
         */
        filteredAttributes: function() {
            var filteredAttributes = JSON.parse("{}");
            console.log('filteredAttributes');

            // loop through each matching part and create new array of the matching attributes
            this.matchingParts.forEach(function(part) {

                var partAttributes = JSON.parse(part.attributes_json);

                for (attributeID in partAttributes) {

                    // Add to the index if already exists
                    if (attributeID in filteredAttributes) {

                        filteredAttributes[attributeID].push(partAttributes[attributeID]);
                        filteredAttributes[attributeID] = [...new Set(filteredAttributes[attributeID])];

                    // create the index if it doesn't already exist
                    } else {

                        var tempArr = [partAttributes[attributeID]];
                        filteredAttributes[attributeID] = tempArr;

                    }

                }
            });

            return filteredAttributes;
        },

        /**
         * filter the measurements by selected values
         * @return {object} All the filtered measurements sorted by attribute
         */
        filteredMeasurementsByAttribute: {
            get: function() {

                console.log('filteredMeasurementsByAttribute');

                var selected = this.selectedAttributes;
                var filteredMeasurementsByAttribute = [];
                var filteredAttributesKeys = Object.keys(this.filteredAttributes);
                var filteredAttributes = this.filteredAttributes;

                this.measurementsByAttribute.forEach(function (attribute, index) {

                    console.log(attribute);
                    var tempAttribute = attribute;
                    // filteredMeasurementsByAttribute[index] = tempAttribute;

                    if (filteredAttributesKeys.includes(tempAttribute.id.toString())) {

                        var filteredMeasurements = filterMeasurements(tempAttribute, filteredAttributes[tempAttribute.id]);                    
                        tempAttribute.measurements = filteredMeasurements;
                        filteredMeasurementsByAttribute[index] = tempAttribute;

                    }

                });

                // return measurementsByAttribute.map(function(attribute) {

                //     if (filteredAttributesKeys.includes(attribute.id.toString())) {

                //         attribute.measurements = filterMeasurements(attribute, this.filteredAttributes[attribute.id]);
                //         return attribute;

                //     } 

                // }, this);

                return filteredMeasurementsByAttribute;

            },
            set: function(newMeasurementsByAttribute) {
                console.log('setter working!');
                this.measurementsByAttribute = newMeasurementsByAttribute;
            }
        },

        // returns matching parts depending on what attributes are selected
        matchingParts: function() {
            console.log('matchingParts');
            return this.allParts.filter(checkPartAttributes.bind(this, this.selectedAttributes));
        },
    },
    methods: {
        clearAttribute: function(attributeID) {
            this.$set(this.selectedAttributes, attributeID, "");
            var tempArray = [];
            this.filteredMeasurementsByAttribute = tempArray.concat(measurementsByAttributeMaster);

            // this.selectedAttributes.splice(0);
        },
        kebabTitle: function(title) {

            if (title == null) {
                return '';
            }

            return title.replace(/([a-z])([A-Z])/g, "$1-$2")
             .replace(/\s+/g, '-')
             .toLowerCase();
        },        
    }
});

Answer 1

In JavaScript, setting a variable to an object only copies the reference to the object. In data() , you've initialized this.measurementsByAttribute to a local variable named measurementsByAttribute , so any changes to this.measurementsByAttribute would affect the original variable.

The problem is observed in the getter for filteredMeasurementsByAttribute , which modifies this.measurementsByAttribute and thus the original variable:

filteredMeasurementsByAttribute: {
  get: function() {
    this.measurementsByAttribute.forEach(function (attribute, index) {
        // tempAttribute refers to original object in `this.measurementsByAttribute`
        var tempAttribute = attribute;

        if (filteredAttributesKeys.includes(tempAttribute.id.toString())) {
            // ❌ this changes original object's prop
            tempAttribute.measurements = filteredMeasurements;
        }
    });

    //...
  }
}

One solution would be to:

1. Apply Array.prototype.filter() to this.measurementsByAttribute in order to get the measurements that match the filter selection.
2. and use Array.prototype.map() and the spread operator to shallow-clone the original objects with their measurements prop modified.

filteredMeasurementsByAttribute: {
  get: function() {
    const filteredAttributesKeys = Object.keys(this.filteredAttributes)

    return this.measurementsByAttribute
      /* 1 */ .filter(m => filteredAttributesKeys.includes(m.id.toString()))
      /* 2 */ .map(m => ({
                ...m,
                measurements: filterMeasurements(m, this.filteredAttributes[m.id])
              }))
  }
}

Answer 2

You are initiating the change to the original attribute when the computed prop is changed.

// ...
filteredMeasurementsByAttribute: {
// ...

 set: function(newMeasurementsByAttribute) {
                console.log('setter working!');
                this.measurementsByAttribute = newMeasurementsByAttribute;
            }
        },
//...

I would just have the compute prop apply filter and return the result, but do not have any set on the compute.

If you want the original attribute but have reactive attributes everywhere in the component, it may help to use a different variable.

const measurementsByAttributeClone = {...measurementsByAttribute};

// any changes to `measurementsByAttribute` will not impact `measurementsByAttributeClone`