0

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

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

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

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

4

1 回答 1

1

如果您的组件在其钩子emit中是一个事件，而在其mounted 钩子中是另一个事件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].

于 2017-12-20T13:06:19.607 回答