Vuefire: Array bindings don't cooperate with array methods and arrow functions

[drumanagh]

I have something similar to this in a component:

<template>
  <p>{{ filteredCollection }}</p>
</template>

<script>
// DATABASE is the Firebase.initializeApp object
import DATABASE from '../firebase.js'

export default {
  computed: {
    filteredCollection () {
      return this.someCollection
        .map(collectionItem => { collectionItem.someProperty })
    }
  },
  firebase: {
    someCollection: DATABASE.ref('someCollection')
  }
}
</script>

I should expect to see the output, once fully updated, to be something like:

<p>[ "property value on first item", "property value on second item", "property value on third item", ... ]</p>

Instead, I only ever get this, no matter how long I wait:

<p>[ null, null, null, ... ]</p>

Somewhere along the line it's supplying the correct number of items to the map method, but never actually updates with the loaded values for the collectionItem objects.

Interestingly, it works perfectly fine if I take exactly the same code and replace

.map(collectionItem => { collectionItem.someProperty })

with

.map(function (collectionItem) { return collectionItem.someProperty })

...even though there's no obvious reason that binding the this context like that would or should affect the value of the item.

[posva]

Remove the brackets or add a return 😉

.map(collectionItem => collectionItem.someProperty

[drumanagh]

ES6 arrow functions have an implicit return for one-liners. (param) => {param} is the same as (param) => {return param}.

[jwngr]

Not exactly. (param) => (param) with parentheses, not curly braces, is the same as (param) => {return param}:

f = (param) => {return param};
console.log(f(5));  // 5

f = (param) => (param);
console.log(f(5));  // 5

f = (param) => {param};
console.log(f(5));  // undefined