按属性从 dom 中选择 v-for 项目的最简单方法？

Posted 2023-02-23

【中文标题】按属性从 dom 中选择 v-for 项目的最简单方法？

【英文标题】：Easiest way to select a v-for item from dom by property?

【发布时间】：2018-06-03 00:20:32

【问题描述】：

我正在呈现这样的交易列表：

<deal :deal="deal"
      v-for="(deal, index) in deals"
      :key="index"
      ref="deals"
      @click.native="setScrollLocation(deal.id)">
</deal>

现在一个交易有一个id 属性，您可以看到它被传递到setScrollLocation 方法中。

如何从 dom 中选择具有特定交易 ID 的元素？

我可以使用数据属性之类的东西，然后简单地在其上设置交易 ID，如下所示：

<deal :data-deal-id="deal.id"></deal>

现在我有一些可以通过document.querySelector 使用this.$el.querySelector 之类的东西来查询的东西。

我不喜欢在我的组件中使用querySelector 之类的东西，因为这不是容错的。有什么更好的方法来做到这一点？

【问题讨论】：

可能是一个创建从id 到元素的映射的指令。或者从组件的mounted 和beforeDestroy 挂钩管理这样的映射。

@RoyJ 需要详细说明吗？我还想知道ref 属性是否可以设置为deal.id 或其他东西。我猜这将允许我从$refs 元素中选择它。

【参考方案1】：

如果您的组件 emits 在其 mounted hook 中的一个事件和另一个在其 beforeDestroy 挂钩中，则父级可以使用它们来维护从 id 到元素的映射。

mounted() 
  this.$emit('mapElement', deal.id, this.$el);


beforeDestroy() 
  this.$emit('unmapElement', deal.id);

父母会有类似的东西

methods: 
  mapElement(id, el) 
    this.elementMap[id] = el;
  ,
  unmapElement(id) 
    delete this.elementMap[id];
  

会像这样把他们联系起来

<deal :deal="deal"
      v-for="(deal, index) in deals"
      :key="index"
      ref="deals"
      @mapElement="mapElement"
      @unmapElement="unmapElement">
</deal>

然后，当您需要与交易 ID 关联的元素时，它位于 this.elementMap[id]。

【讨论】：

该死，这是一个聪明的解决方案。我要试试这个。