Невозможно отобразить строку таблицы <tr>через компонент с VueJS - PullRequest
Новая
       5

Невозможно отобразить строку таблицы <tr>через компонент с VueJS

0 голосов
/ 29 августа 2018

Я пытаюсь использовать компонент для рендеринга строки таблицы с использованием VueJS, но при этом не могу прочитать свойства объекта. У меня есть два компонента: ProspectIndex и Player.

Вот шаблон ProspectIndex: 

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

Я пробовал несколько разных способов вставить объект игрока в компонент Player, но безрезультатно. Вот как выглядит объект игрока: 

{
   "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", я вижу напечатанные сотни тестовых строк. Так что эта часть работает, это просто доступ к объекту игрока, который поставил меня в тупик!

1 Ответ

0 голосов
/ 29 августа 2018

В вашем Player компоненте добавьте prop, чтобы принять объект player из родительской области, то есть 

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

У вас уже есть v-bind:player="player" в родительской области, так что должно быть все, что вам нужно.

...