使用表达式时 VueJS 2 组件道具不一致

Question

我正在努力将一条信息传递到我的一个组件中。

我正在尝试遍历数据列表，并为列表的最后一项传入一个设置为 true 的布尔值。我运行陷入了一个有趣的不一致，如果我在下面的代码中使用 v-bind:isLast="index + 1 == tiers.length" 它的计算结果为 false 但如果我使用 v-bind:test="{index: index, tiersLength: tiers.length, bool: index + 1 == tiers.length}" 并使用一个对象来存储该信息而不是期望一个布尔值，bool 键在对象中的值为 true。

有人知道这是为什么吗？而且，作为计算属性会更好吗？我真的不想将层列表中的更多信息传递到组件中，因为我觉得该组件应该完全忽略层列表。

<section id="classification-metadata-editor">
  <metadata-button-row
    v-for="(row,index) in tiers"
    v-bind:row="row"
    v-bind:index="index"
    v-bind:isLast="index + 1 == tiers.length"
    v-bind:test="{index: index, tiersLength: tiers.length, bool: index + 1 == tiers.length}">
  </metadata-button-row>
</section>

isLast: false
test: {index: 0, tiersLength: 1, bool: true}

我不太确定这是否是有意为之，因为我觉得我所做的比设置道具的预期要多一些，但我不太确定还能怎么做。我一直在寻找类似的问题，但不太确定搜索的正确术语，所以如果其他地方涉及到这个问题，我深表歉意。

谢谢！

Answer 1

您不能像这样将对象分配给 prop:

v-bind:test="{index: index, tiersLength: tiers.length, bool: index + 1 == tiers.length}">

您必须创建计算属性或方法来获取此对象，如下所示：

methods: {
  getObject (index) {
  return {index: index, tiersLength: this.tiers.length, bool: index + 1 == this.tiers.length}
  }
}

并在模板中使用此方法：

v-bind:test="getObject(index)"

使用表达式时 VueJS 2 组件道具不一致

VueJS 2 component prop inconsistency when using expressions

vue-component

vuejs2