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

Question

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!

Wouldn't you pass the player to your component via a prop? — Phil
– Phil, Commented Aug 29, 2018 at 3:00
Would I Phil? I am not exactly sure, which is why I am asking ;-) I don't think I've fully understood the point of props just yet as I am a Vue noob. — cnizzardini
– cnizzardini, Commented Aug 29, 2018 at 3:04
props is how you get data from an outer scope into a component. See vuejs.org/v2/guide/… — Phil
– Phil, Commented Aug 29, 2018 at 3:07
Awesome, should I be using props instead of doing stuff like this then: data() { return { prospects: this.$parent.$parent.prospects }; }, — cnizzardini
– cnizzardini, Commented Aug 29, 2018 at 14:21
Absolutely! And for communicating back out, use $emit(). See vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow — Phil
– Phil, Commented Aug 29, 2018 at 22:53

Phil · Accepted Answer · 2018-08-29 03:12:22Z

1

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.

answered Aug 29, 2018 at 3:12

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related