Как во Vue использовать querySelectorAll?

Question

[Big Wheel]

Корректен ли такой вариант или есть более правильный путь?

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const pins = ref([]);
    const images = ref([]);

    const logProjectElements = () => {
      pins.value = document.querySelectorAll('.project__pin');
      images.value = document.querySelectorAll('.project__image');

      console.log('Project Pins:', pins.value);
      console.log('Project Images:', images.value);
    };

    onMounted(() => {
      logProjectElements();
    });

    return {
      pins,
      images,
    };
  },
};

Answer 1

[Сергей delphinpro]

Возможно и бывают какие-то задачи, в которых такой доступ к DOM был бы оправданным.
Но в целом это неправильно.

У вас есть список проектов

data: {
  projects: [ ... ]
}

Вот и выводите его в шаблонах

<div class="project" v-for="p in projects">
  <div class="project__pin">{{ p.pin }}</div>
</div>