javascript - 无法通过带有 VueJS 的组件呈现表行 <tr>

Question

我正在尝试使用一个组件来使用 VueJS 呈现表格行，但是这样做时我无法读取对象的属性。我有两个组件:ProspectsIndex 和 Player。

这是 ProspectsIndex 模板:

<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>

在我尝试将行拆分为它自己的组件之前，它工作得很好。我这样做是为了在计算属性和其他事情、缩放、关注点分离等方面获得一些帮助。这是 Player 组件:

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

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

我尝试了多种不同的方法来将播放器对象放入播放器组件中，但都无济于事。这是播放器对象的样子:

{
   "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",
}

现在，如果我在 Player 组件中将 {{player.lastName}} 替换为“testing”，我会看到打印了数百行测试。所以该部分有效，它只是访问让我难过的播放器对象!

Answer 1

在您的Player 组件中，添加一个prop 以接受来自父作用域的player 对象，即

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

您的父级范围内已经有 v-bind:player="player"，所以这就是您所需要的。