时间戳

首页 > 解决方案 > 无法使用 VueJS 通过组件渲染表格行

javascript - 无法使用 VueJS 通过组件渲染表格行

问题描述

我正在尝试使用组件来使用 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”，我会看到打印了数百行测试。所以这部分工作，它只是访问让我难过的播放器对象！

标签： javascriptvuejs2vue-component

解决方案

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

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

你已经v-bind:player="player"在你的父范围内，所以这应该是你所需要的。

推荐阅读