CODEWITHSUNDEEP
vue.js
Uncoke
Uncoke

Reputation: 1902

I need fresh eyes to fix VUE props not working

This is a silly task in VUE.JS... but I'm missing it.

I have a sub parent component having:

<teamPlayers :teamId="team.id_team"></teamPlayers>

The value teamId is sent to the child component and it works: I can see the value in child template <h2>{{teamId}}</h2> properly.

But in same child component I got undefined inside the methods using this.teamId.

Here the whole child code:

export default {
    props: ['teamId'],
    methods: {
        getJokess: function () {
            console.log(this.teamId);
        },
    },

    created() {
        this.getJokess();
    }
}

The console should return the correct value but it returns undefined instead of the {{teamId}} is render perfectly.

Upvotes: 0

Views: 54

Answers (1)

zero298
zero298

Reputation: 26899

All that I can think of is that teams may not be declared in your data() function. If it isn't it won't be reactive. Consider the example below:

const teamPlayers = {
  props: ["teamId"],
  methods: {
    getJokess() {
      console.log(this.teamId);
    }
  },
  created() {
    this.getJokess();
  },
  template: "<h2>{{teamId}}</h2>"
};

const app = new Vue({
  el: "#app",
  components: {
    "team-players": teamPlayers
  },
  data() {
    return {
      teams: []
    };
  },
  mounted() {
    setTimeout(() => {
      this.teams = [{
          id_team: "fizz"
        },
        {
          id_team: "buzz"
        },
        {
          id_team: "foo"
        },
        {
          id_team: "bar"
        }
      ]
    }, 1000);

  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="team of teams">
    <team-players :team-id="team"></team-players>
  </div>
</div>

Upvotes: 1

Related Questions