Как получить доступ к динамическим элементам в Vue.js?

Question

Я создаю несколько div-ов, используя v-for:

<div class="foo" v-for="bar in bars">{{bar.text}}</div>

Данные для div-ов поступают из запроса Axios:

created() {
  axios('get/data').then( response => {
    this.bars = response.data;
  });
}

Все это отлично работает и правильно отображает.

Однако, как только они были созданы, я хочу получить доступ к div, чтобы узнать такие вещи, как getBoundingClientRect, и вот где я застрял.

Я не понимаю, почему this.$el.querySelectorAll('.foo') не работает, когда this.$el явно содержит все div .foo. Я предполагаю, что это связано с тем, что DOM еще не был обновлен, но я не понимаю, как работает один бит, а другой - нет.

mounted() {
  console.log(this.$el); //Outputs all the .foo divs
  console.log(this.$el.querySelectorAll('.foo')); //Outputs empty array
}

Использование this.$el.querySelectorAll('.foo') в updated() работаетхорошо, но мне нужно запускать код только один раз, а не при каждом обновлении.

Vue версия 2.6.10

Answer 1

вы можете использовать $nextTick после данных, которые были загружены, которые должны показывать теги div

created() {
  axios('get/data')
  .then( response => {
    this.bars = response.data;

    this.$nextTick(() => {
        console.log(this.$el.querySelectorAll('.foo')); 
    });
  });
}

Почему вы получаете странное поведение,моя теория такова ...

this.$el регистрирует объект, который продолжает обновляться даже после монтирования экземпляра. Однако this.$el.querySelectorAll возвращает моментальный снимок.

При этом следует избегать использования this.$el.querySelectorAll, когда это возможно, вместо $refs. Однако вы увидите ту же проблему, и если у вас динамически генерируется повторяющееся содержимое (например, при использовании v-for) и / или если вы взаимодействуете с другой библиотекой, querySelectorAll может быть лучшим вариантом.

Answer 2

С vuejs лучше использовать $ref

$ Ref Documentation

<div ref="myElement"/>

mounted(){
  const { myElement} = this.$refs;
  console.log(myElement)
}

, тогда у вас больше контроля над вашим элементом