const app = createApp({ data() { return { some_id: 0 } } })Tengo un autocompletar en un campo. Cuando se selecciona una etiqueta, quiero pasar la identificación a una aplicación Vue.
onSelectItem: ({label, value}) => { app.some_id = value; }Esto funcionó en una versión anterior v2 de Vue.js. Ahora, ni siquiera puedo llamar a los métodos de la aplicación Vue desde otras funciones de JavaScript. ¿Cuál es la mejor solución?
Hay ciertas circunstancias en las que puede necesitar acceder y mutar, cambiar los data de la instancia.
Esto fue más fácil en Vue JS 2, pero Vue JS 3 se ha vuelto más encapsulado. Sin embargo, eso no significa que el estado de mutación desde el exterior sea imposible. Puedes leer sobre esto aquí
Suponiendo que está utilizando Vue con pasos de compilación, que cubre la mayoría de los casos, tendrá algo como esto:
const app = createApp({ data() { return {} }, }) .mount('#app'); Ahora, si se dirige a la consola del navegador y escribe app , será nulo porque está limitado al alcance de los archivos .js compilados.
Pero si adjunta una app a un objeto global, document , por ejemplo:
document.app = createApp({ data() { return {} }, }) .mount('#app'); Ahora, si escribe app en la consola, ya no será null , sino la instancia de Vue. Desde allí, puede acceder a los data de la instancia y mutarlos a través de la propiedad app.$data .
Ahora, ¿qué sucede si la instancia tiene components y desea mutar sus $data ? En versiones anteriores, era posible acceder a niños a través de la propiedad $children . Pero ahora, para acceder a los niños, debe darles a cada uno de ellos una ref y luego acceder a través de su nombre de referencia. Por ejemplo:
app.$refs.alertComponent.$data.message = "New message!"