从dom by property选择v-for项目的最简单方法？

Question

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

<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的东西，因为这不是容错的。什么是更好的方法来做到这一点？

Answer 1

如果你的组件qazxswpo是emit mounted中的一个事件，而hook钩子中的另一个事件，父母可以使用它们来维护从beforeDestroy到element的映射。

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];
  }
}

然后，当您需要与交易ID相关联的元素时，它位于

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

中。