使用表达式时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}"并使用一个对象来存储该信息而不是期望一个布尔值，则布尔键的值为对象内为真。

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

<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

您不能像这样将对象分配给道具：

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