CODEWITHSUNDEEP
javascriptvuejs2vue-component
cnizzardini
cnizzardini

Reputation: 1240

Unable to render table row <tr> via component with VueJS

I am trying to use a component to render a Table Row using VueJS, but I cannot read the properties of the object when doing so. I have two components: ProspectsIndex and Player.

Here is the ProspectsIndex template:

<template>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Player</th>
                </tr>
            </thead>
            <tbody>
                <tr 
                    v-for="(player, index) in prospects"
                    v-bind:player="player"
                    v-bind:index="index"
                    v-bind:key="player.personId"
                    is="player"
                    >
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import Player from './Player';
    export default {
        name: 'ProspectsIndex',
        components: {
            Player
        },
        data() {
            return {
                position: '-',
                status: '-',
                name: '',
                schools: this.$parent.$parent.schools,
                prospects: this.$parent.$parent.prospects
            };
        }
    }
</script>

This was working just fine until I tried splitting the row into its own component. I am doing this to have some help with computed properties and other things, scaling, separation of concerns etc. Here is the Player component:

<template>
    <tr>
        <td valign="top" width="5%" style="padding:0">
            {{player.lastName}}
        </td>
    </tr>
</template>

<script>
    export default {
        name: 'Player'
    }
</script>

I have tried a number of different ways to get the player object into the Player component to no avail. Here is what the player object looks like:

{
   "personId":2559901,
   "firstName":"SAQUON",
   "lastName":"BARKLEY",
   "pickAnalysis":null,
   "hasAnalysis":false,
   "video":null,
   "pick":null,
   "college":38,
   "pos":"RB",
   "height":"6'0\"",
   "weight":233,
   "armLength":"31 3/8",
   "handSize":"9 1/2",
   "expertGrade":7.45,
   "fanPick":null,
   "schoolYear":"Junior",
}

Now, if in the Player component I replace {{player.lastName}} with "testing" I see many hundreds of rows of testing printed. So that portion works, its just accessing the player object which has me stumped!

Upvotes: 2

Views: 391

Answers (1)

Phil
Phil

Reputation: 164980

In your Player component, add a prop to accept the player object from the parent scope, ie

export default {
  name: 'Player',
  props: {
    player: Object
  }
}

You already have v-bind:player="player" in your parent scope so that should be all you need.

Upvotes: 1

Related Questions