"Vue's watch method seems to be failing to properly filter through

Question

"Vue's watch method seems to be failing to properly filter through

The filter functionality within a Vue watched function doesn't appear to be functioning as expected. Despite returning false for the E: object and true for all other items, the E: object remains in the array when it should have been removed.

Below is the object passed to the component via prop:

[
    {
        "fs": "C:",
        "type": "NTFS",
        "size": 273649844224,
        "used": 265129050112,
        "use": 96.88624192856284,
        "mount": "C:"
    },
    {
        "fs": "D:",
        "type": "NTFS",
        "size": 1000202039296,
        "used": 879919800320,
        "use": 87.97420578539696,
        "mount": "D:"
    },
    {
        "fs": "E:",
        "type": "NTFS",
        "size": 524283904,
        "used": 35745792,
        "use": 6.818022015796998,
        "mount": "E:"
    },
    {
        "fs": "F:",
        "type": "NTFS",
        "size": 250058108928,
        "used": 193818132480,
        "use": 77.50923707729336,
        "mount": "F:"
    },
    {
        "fs": "G:",
        "type": "NTFS",
        "size": 249464614912,
        "used": 149687517184,
        "use": 60.00350680468374,
        "mount": "G:"
    }
]

Component Script:

export default {
  name: "DISK",
  props: ["diskinfo"],
  watch: {
    diskinfo: function () {
      if (typeof this.diskinfo !== "undefined") {
        // convert to GB
        this.diskinfo.forEach((disk) => {
          disk.used = (disk.used / 1073741824).toFixed(0);
          disk.size = (disk.size / 1073741824).toFixed(0);
        });
        // remove if < 1 gb
        this.diskinfo.filter((disk) => disk.size === "0"); //🡄🡄🡄 Not filtering
      }
    },
  },
};

javascript vue.js

Answer 1

Answer №1

It is not recommended to alter a prop value, as this goes against Vue best practices
Array.prototype.filter() focuses on determining what data to keep, rather than what to discard. If you want to eliminate elements with size === 0, use a comparison like size > 0
If you do not utilize the output of Array.prototype.filter(), any modifications will not be saved

The handling of the diskinfo prop within this component is unclear, but a common approach for such scenarios is employing a computed property

export default {
  name: "DISK",
  props: { diskinfo: Array },
  computed: {
    formattedDiskInfo () {
      return this.diskinfo.map(di => ({
        ...di,
        used: (di.used / 1073741824).toFixed(0),
        size: (di.size / 1073741824).toFixed(0)
      })).filter(({ size }) => size > 0)
    }
  }
}

In your template, consider using the formattedDiskInfo array instead of directly relying on the diskinfo prop.

Answer 2

It is not recommended to alter a prop value, as this goes against Vue best practices
Array.prototype.filter() focuses on determining what data to keep, rather than what to discard. If you want to eliminate elements with size === 0, use a comparison like size > 0
If you do not utilize the output of Array.prototype.filter(), any modifications will not be saved

The handling of the diskinfo prop within this component is unclear, but a common approach for such scenarios is employing a computed property

export default {
  name: "DISK",
  props: { diskinfo: Array },
  computed: {
    formattedDiskInfo () {
      return this.diskinfo.map(di => ({
        ...di,
        used: (di.used / 1073741824).toFixed(0),
        size: (di.size / 1073741824).toFixed(0)
      })).filter(({ size }) => size > 0)
    }
  }
}

In your template, consider using the formattedDiskInfo array instead of directly relying on the diskinfo prop.

Answer 3

Answer №2

When using the filter method, a new array is returned with the filtered results:

a = [1,2,3]

a.filter((b) => b < 2) // This will return [1], but the original array 'a' remains as [1,2,3]

For example:

this.diskinfo = this.diskinfo.filter((disk) => disk.size === "0")

Answer 4

When using the filter method, a new array is returned with the filtered results:

a = [1,2,3]

a.filter((b) => b < 2) // This will return [1], but the original array 'a' remains as [1,2,3]

For example:

this.diskinfo = this.diskinfo.filter((disk) => disk.size === "0")

Answer 5

Answer №3

According to Phill and Cyrbuzz, the filter function will give you a filtered array as output, which means you need to make the following adjustment:

Instead of: this.diskinfo.filter((disk) => disk.size === "0");

Do this instead:

Update it to: this.diskinfo = this.diskinfo.filter((disk) => disk.size === "0");

Answer 6

According to Phill and Cyrbuzz, the filter function will give you a filtered array as output, which means you need to make the following adjustment:

Instead of: this.diskinfo.filter((disk) => disk.size === "0");

Do this instead:

Update it to: this.diskinfo = this.diskinfo.filter((disk) => disk.size === "0");

"Vue's watch method seems to be failing to properly filter through

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing modular structure for efficient jQuery AJAX request

Is it possible to smoothly transition from one background image to another in CSS or JavaScript?

Attempting to implement a basic AngularJS integration with Google Maps for a straightforward demonstration

Make sure the variable is present in the store state by utilizing vuex

Issue with CKEditor5 Link popup not displaying in both Bootstrap 5 modal and RSuite library modal in React

Implementing React with multiple event listeners for a single click event

Creating an image on an HTML canvas using RGB values

Choose or unselect checkboxes that are currently visible

Display/Collapse SELECT choices?

I am a newcomer to HTML and I am eager to display the selected options from a <select> element

A guide on how to activate an event when a radio button is selected using jQuery

Preserving the jQuery object during an AJAX post操作

Is there a way to modify the appearance of a particular element in ng-repeat?

Error encountered with the Angular 2 routing system

Trying to decide between using a Javascript or HTML5 PDF Editor?

Cloning a checkbox using Jquery

Update the background's color by cycling through a set of colors stored in

Incorporated asynchronous functionality, struggling to integrate it into the code

Is there a way to retrieve Google Scholar citations using SERPAPI?

Error: The import statement is invalid when used outside of a module