Vuejs v-for 根据某些条件添加标签属性或事件监听器

Question

我有一个对象数组，我在模板中循环这些对象。

<div v-for="(list, idx) in collection" :key="list.id">
    <misc v-if="!idx" :is-master="!idx" :selection="list" v-on:report="onSelectionReport"></misc>
    <misc v-else :is-master="!idx" :selection="list"></misc>
</div>

如您所见，有两个“misc”标签。这样做的唯一原因是我只希望“报告”事件从单个实例中冒出来。

这可行，但有没有办法在这种情况下保存 v-if/v-else 构造？ （这会导致这里有一个 misc 标签）。

谢谢。

Answer 1

您可以定义一个内联事件处理程序来检查idx 的值：

<div v-for="(list, idx) in collection" :key="list.id">
    <misc :is-master="!idx" :selection="list" v-on:report="arg => idx || onSelectionReport(arg)"></misc>
</div>

但是，正如@Lawrence Cherone 所建议的那样，在组件内部执行此逻辑可能会更简洁 - 特别是因为您将idx 作为属性（通过is-master）传递。