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

如果您的组件emit在其mounted hook中发生了一个事件而在其beforeDestroy挂钩中发生了另一个事件，则父组可以使用它们来维护{{1}的映射元素。

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

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

1 个答案: