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"，因此应该满足您的所有需求。

无法使用VueJS

1 个答案: