computed property returns empty array

Question

I have a computed property in VueJS like this:

  computed: {
    groupedTemplates() {
      const ret = this.templates.reduce((acc, value) => {
        value.group = value.group || "Ungrouped";
        if (!acc[value.group]) {
          acc[value.group] = [];
        }
        acc[value.group].push(value);
        return acc;
      }, []);
      console.log(ret);   // <---- This works!!
      return ret;
    },
    ...mapState(["currentPatient", "currentSite", "phrases", "templates"]),
  },

When I view the console, I can see the correct response which is app.js:4061 [Ungrouped: Array(6), Note: Array(2), Order Set: Array(3)]

However, when I use groupedTemplates in code, it evaluates to []

when I change the return line to

return 34;

It returns 34 as expected. What gives?

Michal Levý · Accepted Answer · 2020-11-04 07:28:05Z

1

Because your reduce does not add items into the array but creating new properties on Array object - you can't use a string as an index into an array...

What you probably want is to return Object from your groupedTemplates computed...

answered Nov 4, 2020 at 7:28

Michal Levý

38.6k8 gold badges82 silver badges92 bronze badges

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

2 Comments

mankowitz Over a year ago

Wow! great pick up! Thanks! But how come I was able to see it with console.log?

Michal Levý Over a year ago

Console just shows object with all the properties....

Collectives™ on Stack Overflow

computed property returns empty array

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related