访问Vuejs组件中的DOM元素不可靠

Question

在下面的简化例子中，我演示了我的问题。

1. 我有一个异步更新的for-loop系统 myItems.
2. 我希望能够和相应的更新 selectableItems 借用 this.$el.querySelector('selectable-item').

<template>
  <div>
    <p>selectableItems: {{selectableItems}}</p>
    <div v-for="item in myItems" class="selectable-item">item</div>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      myItems: [],
      selectableItems: [],
    }
  },
  created(){
    // Populate myItems with a delay
    self = this
    setTimeout(function() {
      self.myItems = [1, 2, 3]
    }, 1000);
  },
  mounted(){
    // Fetch some of myItems based on a class
    this.selectableItems = this.$el.querySelectorAll('.selectable-item')
  },
}
</script>

<style scoped lang="scss">
</style>

我试过很多不同的东西，我在网上找到的，TickNext，计算，更新等等。我觉得我做的事情从根本上来说是错误的。但对我的情况来说，能够并通过一个类来选择DOM元素是很重要的。

任何帮助都非常感激。

更新了。更多上下文

有些人问我要大图片，所以我在这里给大家提供一些信息。

目前我有一个大的Vue组件，用户可以选择元素。我正试图将所有这些用户交互因素纳入到一个 mixin 中，这样我就可以在代码的其他地方重复使用它。

为了便于重用，我需要能够简单地添加一个类，即 "混合器"。selectable 到模板中的任何HTML标签。这就是界面，然后 mixin 会施展所有的魔法，填充 selectedElements 取决于用户的交互。

这就是为什么要避免refs等，因为那样的话，太多的逻辑会到处泄露，也就打消了让mixin可重用的目的。除非我遗漏了什么。

Answer 1

好吧，在尝试了许多不同的方法后，我通过使用一个非反应式的中间变量来解决这个问题。这意味着我不能在模板中使用这个变量，但这很好。

export default {
  ..
  // NOT reactive so you can't just use it in your templates.
  _selectableItems: [],

  updated(){
    self._selectableItems = self.$el.querySelectorAll('.selectable-item')
  },
  ..
}