Estoy usando Vue 3.0.2 en mi proyecto, cargado a través de CDN de la siguiente manera:
<head> ... <script src="https://unpkg.com/vue@3.0.2"></script> </head> ¿Cómo puedo acceder a un elemento HTML en mi componente Vue al importar la biblioteca a través de CDN? Quiero hacer el equivalente de lo que sería document.getElementById('element') en JS simple.
Las publicaciones relacionadas aquí sugieren que llamar a $this.el.querySelector debería funcionar para esto, sin embargo, no tengo acceso a esa función. ¿Sospecho que se debe a la importación de Vue a través de CDN?
Mi componente se ve de la siguiente manera ...
const app = Vue.createApp({ data() { return { // data members. } }, methods: { // method definitions. } }); app.mount('#app')¡Gracias por cualquier consejo!
Prueba algo como esto
<script src="https://unpkg.com/vue@3.0.2"></script> </head> <body> <div id="app"> <h1>{{ data }}</h1> <input type="text" ref="input"> <button @click="log">LOG</button> </div> <script> const app = Vue.createApp({ data() { return { data: 'any' } }, methods: { log() { console.log(this.$refs.input.value) } } }); app.mount('#app') </script>