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

Posted 2023-02-23

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

【英文标题】：Vuejs v-for add tag attribute or event listener depending on some condition

【发布时间】：2018-08-04 14:35:59

【问题描述】：

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

<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 标签）。

谢谢。

【问题讨论】：

将idx 作为道具传递，并在组件中执行 if else 逻辑。

【参考方案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）传递。

【讨论】：

我想过这一点，但内存中的事件处理程序与 实例一样多，理想情况下我想避免这种情况。如果没有更好的选择，我会选择您的答案作为解决方案。谢谢。