select dom 中 v-for 项目的最简单方法属性？

Question

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

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

现在交易有一个 id 属性，如您所见，它被传递到 setScrollLocation 方法中。

如何 select 具有来自 dom 的特定交易 ID 的元素？

我可以使用类似数据属性的东西，然后像这样简单地设置交易 ID：

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

现在我有一些可以通过 document.querySelector 查询的东西，比如 this.$el.querySelector.

我不想在我的组件中使用类似 querySelector 的东西，因为这不是容错的。执行此操作的更好方法是什么？

Answer 1

如果您的组件 emits an event in its mounted hook 和另一个在其 beforeDestroy 钩子中，parent 可以使用它们来维护从 id 到元素的映射。

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

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

parent 会像

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]。

select dom 中 v-for 项目的最简单方法属性？

Easiest way to select a v-for item from dom by property?

vue.js

vue-component

vuejs2

v-for

select dom 中 v-for 项目的最简单方法 属性？

Easiest way to select a v-for item from dom by property?

vue.js

vue-component

vuejs2

v-for

select dom 中 v-for 项目的最简单方法属性？