Question

使用vuejs大约只有6周的时间，并且根本没有研究过组件，因此，如果这是一个愚蠢的问题，请您谅解。

我正在尝试使bootstrap-vue中的选项卡的b-spinner组件在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属性时，它就会中断。当我尝试将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)
    },

但是{/ {1}}永远不会返回b / c updateDone是整个Vue对象（可能是父组件）

希望对此有所了解。

解决方案感谢安东尼奥

player

Answer 1

根据您的评论，我意识到updateDone是computed的属性。

在这种情况下，请勿使用computed属性。

您必须使用method而不是computed属性。

为什么？ computed个属性被缓存并仅在其依赖项更改时更改。就您而言，循环渲染标签页时player中没有任何变化。这意味着它将显示updateDone属性的相同结果。：（

但是方法将在每次调用时进行评估。：）

从v-for传递参数以动态更新b-tab标题

1 个答案: