¿Cómo puedo apuntar al elemento con clase de test dentro de este componente vue?
<template> <div id="test" class="test"> </div> </template> <script setup> console.log(document.querySelector('.test')) </script> Este componente se importa a otro componente. La consola genera null .
el componente no se procesa antes de que se ejecute ese script
Desea esperar hasta que se monte
<template> <div id="test" class="test"> </div> </template> <script setup> import { onMounted } from 'vue'; onMounted(() => { console.log(document.querySelector('.test')) }); </script>Sin embargo, en general, casi nunca hay necesidad de usar métodos DOM como ese en vue; no diré nunca, porque sé que tan pronto como diga eso, alguien encontrará una razón válida para
aunque nunca lo he hecho
La mejor práctica es usar ref en lugar de métodos de manipulación DOM, y también usar gancho onMounted para verificar el elemento como se menciona en el siguiente ejemplo:
<script setup> import { ref,onMounted } from 'vue' const input =ref() onMounted(()=>{ input.value.focus() }) </script> <template> <input ref="input"> </template>puede usar onMounted para apuntar al elemento dentro del componente vue:
<script setup> import { onMounted } from 'vue' onMounted(() => { console.log(document.querySelector('.test')); }) </script> pero recomiendo usar ref en lugar del método de manipulación DOM:
<script setup> import { ref, onMounted } from 'vue' const el = ref() onMounted(() => { el.value // <div> }) </script> <template> <div ref="el"></div> </template>documentos: https://vuejs.org/api/composition-api-lifecycle.html#onmounted