Передайте параметр из v-for для динамического обновления заголовка b-tab - PullRequest
0 голосов
/ 07 октября 2019

Только около 6 недель на использование vuejs и вообще не рассматривал компоненты, поэтому извините, если это глупый вопрос.

Я пытаюсь сделать компонент b-spinner для вкладок от bootstrap-vue динамически обновляется в цикле v-for, с параметром v-for, проходящим к вычисляемому свойству.

Работает нормально, если не в v-for.

<b-tab>
  <template v-slot:title>
     <b-spinner type="border" small v-show="!updateDone"></b-spinner> <strong>Tab Title</strong>
  </template>
  ...
</b-tab>

Но когда я пытаюсь передать свойство игрока из v-for, оно ломается. Когда я пытаюсь передать player в слот заголовка, передается весь родительский компонент.

<b-tab :key="player['player-id']" v-for="player in updatePool">
  <template v-slot:title="{player}">
    <b-spinner type="border" small v-show="!updateDone(player)"></b-spinner> <strong>{{player['player-name']}}</strong>
  </template>
  ...
</b-tab>

updateDone является вычисляемым свойством следующим образом:

updateDone: function (player) {
  return _.every(Object.values(this.someObject[player['player-name']]), Boolean)
    },

Но updateDone никогда не возвращается b / c player является целым объектом Vue (предположительно, родительским компонентом)

Надеясь на некоторое понимание этого.

РЕШЕНИЕ Благодаря Антонио

<b-tab v-for="player in updatePickPool" :key="player['player-id']">
  <template v-slot:title>
    <b-spinner type="border" small v-show="!playerPathComplete(player)"></b-spinner><strong> {{player['player-name']}}</strong>
  </template>
...
</b-tab>

1 Ответ

1 голос
/ 07 октября 2019

Согласно вашим комментариям, я понял, что updateDone - это свойство computed.

Не используйте свойство computed в этом случае.

Вам необходимо использовать method вместо computed свойство.

Почему? computed свойства кэшируются и изменяются только при изменении их зависимостей. В вашем случае нет никаких изменений в player при циклическом отображении вкладок. Это означает, что он покажет те же результаты свойства updateDone. : (

Но метод будет вычислять каждый раз, когда он вызывается.:)

...