时间戳

首页 > 解决方案 > 访问 Vuejs 组件中的 DOM 元素不可靠

vue.js - 访问 Vuejs 组件中的 DOM 元素不可靠

问题描述

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

  1. 我有一个异步更新的 for 循环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 可重用的目的。除非我错过了什么。

标签： vue.jsdomdom-manipulation

解决方案

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

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

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

推荐阅读