CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Bitwise
Bitwise

Reputation: 8461

Ensure all properties are reactive - VueJS

While building out "children" router components I'm running into a [Vue Warn] that is telling me a particular property may not be reactive. Here is my scenario:

ROUTER:

{
    path: '/leagues/:id',
    name: 'League',
    meta: {requiresAuth: true},
    component: League,
    children: [
      {
        name: 'ActiveSeason',
        path: 'active_season',
        meta: {requiresAuth: true},
        component: ActiveSeason
      }
    ]
  },

league.vue (parent)

Here I'm passing some values to the "router_view" to use in the child component. "active_season" I get from a response from the server.

<router-view
      :active_season_present="active_season_present"
      :active_season="active_season"
    />

   // Network call
   axios.get(process.env.ROOT_API + '/leagues/' + params.id, {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token')
      }
    }).then(response => {
      this.active_season = response.data.league.active_season
    }).catch(error => {
    })

ActiveSeason.vue (child)

<template>
  <div v-if="active_season_present">
    <div class="page-container__table">
      <h3 class="page-container__table__header">Active Season</h3>
      <v-data-table
        :headers="headers"
        :items="active_season.active_teams"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td class="text-xs-left">{{ props.item.name }}</td>
          <td class="text-xs-left">{{ props.item.score }}</td>
        </template>
      </v-data-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ActiveSeason',
  props: [
    'active_season_present',
    'active_season'
  ],
}
</script>

Vue Warn

[Vue warn]: Property or method "active_season" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

The data is showing up in the child component which makes me think things could be okay from a functionality standpoint but I obviously want to take care of this warning. Any help would be appreciated.

Upvotes: 0

Views: 200

Answers (1)

user125661
user125661

Reputation: 1568

In the template of the league component you refer to active_season, but this is not a reactive property. You probably didn't add it to the data property of that component, like so:

data: function() {
   return {
      active_season: null
   };
}

Doing so would make it a reactive property, and make the warning go away. See https://v2.vuejs.org/v2/api/#data.

Upvotes: 1

Related Questions