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

我正在呈现一个交易列表，如下所示：

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

现在我有了一些东西，可以使用

document.querySelector

来查询，比如

this.$el.querySelector

我不喜欢在我的组件中使用类似于

querySelector的东西，因为这不是容错的。有什么更好的方法可以做到这一点呢？
如果您的组件在其
挂载的
钩子中有一个事件，在销毁之前在其
钩子中有另一个事件，则父组件可以使用它们来维护从
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]
中，可能是一个指令，用于创建从
id
到元素的映射。或者在销毁组件的挂钩之前，从
挂载的
和
管理这样的映射。@RoyJ想详细说明一下吗？我还想知道
ref
属性是否可以设置为
deal.id
或其他属性。这将允许我从
$refs
元素中选择它。该死，这是一个聪明的解决方案。我要试试这个。
<deal :deal="deal"
      v-for="(deal, index) in deals"
      :key="index"
      ref="deals"
      @mapElement="mapElement"
      @unmapElement="unmapElement">
</deal>