es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • La propiedad ‘x’ de Vue3 no existe en el tipo ‘función’ para la propiedad global.

La propiedad ‘x’ de Vue3 no existe en el tipo ‘función’ para la propiedad global.

29 May, 2023 Programación

Tengo una aplicación Quasar y parece que tengo un problema extraño. Estoy tratando de definir una variable global que sea un objeto que contenga solo información sobre la aplicación.
La aplicación se compila completamente y la información correcta aparece en HTML, pero obtengo un error en VSCode.

src/boot/BackChat.js

import { boot } from 'quasar/wrappers';

const version = '0.0.0';

const backChat = {
  version
};

export default boot(({ app, router, store }) => {
  app.config.globalProperties.backChat = backChat;
});

Login.vue

// ...
<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      backChat: this.backChat
    };
  }
}
</script>

¿Estoy usando esta interfaz de manera incorrecta o es solo un error de validación de archivo Vue? Parece que piensa que “backChat” en Login.vue es una función. Si cambio data() a mounted(), ya no es una función, pero luego no puedo acceder a ella en el DOM. Soy muy nuevo en Vue.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema aquí podría estar relacionado con cómo estás definiendo backChat en BackChat.js. Lo estás definiendo como un objeto con una única propiedad version, pero en realidad no estás exportando un objeto con esa propiedad.

    Intenta cambiar tu declaración de exportación a:

    export default {
  backChat
};

    Esto debería exportar un objeto con una propiedad backChat que contiene tu propiedad version.

    Luego, en tu archivo Login.vue, puedes hacer referencia al objeto backChat de esta manera:

    export default {
  data() {
    return {
      backChat: this.$root.backChat
    };
  }
}

    Al utilizar $root, puedes acceder al objeto backChat que definiste en tu función boot en BackChat.js.

    En cuanto al mensaje de error en VSCode, es posible que la validación del código se esté confundiendo porque estás usando el mismo nombre backChat tanto para el objeto que estás exportando como para la propiedad que estás definiendo en tu componente Login.vue. Intenta cambiar el nombre de la propiedad en data() a algo como backChatData, solo para ver si eso resuelve el error de validación.

    ¡Espero que esto ayude!

Comments are closed.