Доступ к элементу DOM в Vuejs компоненте не надежен - PullRequest
Новая
       87

Доступ к элементу DOM в Vuejs компоненте не надежен

0 голосов
/ 04 мая 2020

В приведенном ниже упрощенном примере я демонстрирую свою проблему:

  1. У меня есть for-l oop, который асинхронно обновляет 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, вычислено, обновлено и т. Д. c. Я думаю, что я делаю что-то в корне неправильно. Но для моего случая важно иметь возможность выбирать элементы DOM по классам.

Любая помощь очень важна.

Обновлено: больше контекста

Некоторые люди спрашивали меня об увеличенной картине, поэтому я привожу немного больше информации здесь.

В настоящее время у меня есть большой компонент Vue, в котором пользователь может выбирать элементы. Я пытаюсь выделить все это взаимодействие с пользователем в миксин, чтобы я мог повторно использовать его в других местах своего кода.

Чтобы упростить повторное использование, мне нужно иметь возможность и просто добавить класс selectable на любой HTML тег в шаблоне. Это интерфейс, а затем миксин делает все магию c и заполняет selectedElements в зависимости от взаимодействия с пользователем.

Вот почему так важно избегать ссылок, и т. Д. c. с тех пор слишком много логики c просачиваются повсюду и ставят цель сделать миксин многократно используемым. Если я что-то упустил.

1 Ответ

0 голосов
/ 04 мая 2020

ОК, попробовав много разных вещей, мне удалось решить эту проблему с помощью нереактивной промежуточной переменной. Это означает, что я не могу использовать переменную в шаблоне, но это нормально. 

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

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