I'm trying to create puted properties using data pulled with the mapGetters function in vuex, but I'm always getting undefined, until the page/dom fully loads.

Here's an example for an isRegistered puted property that I use to hide/display certain buttons.

puted: {
      ...mapGetters(['solos', 'user']),
      isRegistered () {
        return this.solos.registered.indexOf(this.user._id) !== -1
      }
}

Here is the HTML for buttons that use the isRegistered puted property.

<a href="#" class="register-button" v-if="!isRegistered">REGISTER NOW</a>
<a href="#" class="registered-button" v-if="isRegistered">REGISTERED</a>

I'm setting the getters via an action which I'm calling in the created function

created () {
      this.getTournament('solos').catch(err => {})
}

Here's my action for setting the corresponding getters

getTournament: ({mit}, type) => {
    return feathers.service('tournaments').find({
      query: {
        type: type,
        status: 'registering'
      }
    }).then(tourney => {
      mit(type.toUpperCase(), tourney.data[0])
    })
}

Here's the corresponding mutation

const mutations = {
  SOLOS (state, result) {
    state.solos = result;
  }
};

Here's the corresponding getter

const getters = {
   solos (state) {
     return state.solos
   }
}

The issue I'm having is the value is initially showed as undefined until the PAGE/DOM is fully loaded, causing .indexOf to throw the following error:

TypeError: Cannot read property 'indexOf' of undefined

The only way I've been able to get this to work is to use an if statement on the puted property that checks if the state data has loaded yet.

isRegistered () {
  if (this.solos._id) return this.solos.registered.indexOf(this.user._id) !== -1
}

This doesn't seem like a proper way of doing things. What am I doing wrong?

I'm trying to create puted properties using data pulled with the mapGetters function in vuex, but I'm always getting undefined, until the page/dom fully loads.

Here's an example for an isRegistered puted property that I use to hide/display certain buttons.

puted: {
      ...mapGetters(['solos', 'user']),
      isRegistered () {
        return this.solos.registered.indexOf(this.user._id) !== -1
      }
}

Here is the HTML for buttons that use the isRegistered puted property.

<a href="#" class="register-button" v-if="!isRegistered">REGISTER NOW</a>
<a href="#" class="registered-button" v-if="isRegistered">REGISTERED</a>

I'm setting the getters via an action which I'm calling in the created function

created () {
      this.getTournament('solos').catch(err => {})
}

Here's my action for setting the corresponding getters

getTournament: ({mit}, type) => {
    return feathers.service('tournaments').find({
      query: {
        type: type,
        status: 'registering'
      }
    }).then(tourney => {
      mit(type.toUpperCase(), tourney.data[0])
    })
}

Here's the corresponding mutation

const mutations = {
  SOLOS (state, result) {
    state.solos = result;
  }
};

Here's the corresponding getter

const getters = {
   solos (state) {
     return state.solos
   }
}

The issue I'm having is the value is initially showed as undefined until the PAGE/DOM is fully loaded, causing .indexOf to throw the following error:

TypeError: Cannot read property 'indexOf' of undefined

The only way I've been able to get this to work is to use an if statement on the puted property that checks if the state data has loaded yet.

isRegistered () {
  if (this.solos._id) return this.solos.registered.indexOf(this.user._id) !== -1
}

This doesn't seem like a proper way of doing things. What am I doing wrong?

• javascript
• vue.js
• vuex

• 1 This is the proper way of doing things. Javascript is defensive, you have to check if objects are in place before accessing inner object properties. – Egor Stambakio Commented May 25, 2017 at 17:49
• 1 Your last bit of code is pretty much exactly how you should do it. – Bert Commented May 25, 2017 at 17:49
• Okay, thanks to the both of you! – Jayson H Commented May 25, 2017 at 17:52

1 Answer 1

The issue is probably about the vue lifecycle.

At the created hook, the puted properties, watchers and data of ponent are initialized (runs synchronously), but solos getter runs inside a promise (runs asynchronously), so the lifecycle continue without the promise get done.

When created hook is finished, the watchers was created, which means if data get changed, they will be reflected at the DOM, but only after the promise returns the result, the solos will be filled. So at the initialization of the app, the promise is not ended, but as soon it ends the data is updated and displayed.

A way to avoid this error is to use v-if="solos.registered", but I'm still searching for a better way to solve this.