Vuetify ne peut pas charger la valeur par défaut dans Vue-Toastification-Questions et réponses sur le réseau chinois PHP

Ce que j'ai essayé, c'est vue-toastification en utilisant un composant personnalisé et certains composants Vuetify dans toast. J'ai créé le référentiel en utilisant npm create vuetify@latest et installé la bibliothèque npm i vue-toastification@latest. Ensuite, j'ai utilisé le plug-in :

// main.ts //Grillage importer Toast, { POSITION } depuis "vue-toastification" ; importer "vue-toastification/dist/index.css" ; const app = createApp(App); options const = { shareAppContext : true, // Depuis https://github.com/Maronato/vue-toastification#access-global-components-and-plugins-inside-toasts position : POSITION.BOTTOM_CENTER, } ; registrePlugins(application); app.use(Toast, options);

Ensuite, j'ai essayé d'appeler toast en utilisant le code suivant :

// store/error.ts importer { useToast } depuis "vue-toastification" ; importer MyComponent depuis "@/components/MyComponent.vue" ; const toast = useToast(); export const useErrorStore = definitionStore("erreur", () => { fonction locationErreur() { toast(MonComposant); } });

Dans mon composant :

// composants/MyComponent.vue      Exemple d'alerte   Recharger    
   fonction recharger() { if (type de fenêtre !== "non défini") { window.location.reload(); } }

我从App.vue文件中调用它：

// App.vue    Erreur de localisation     importer { useErrorStore } depuis "./store/error"; const errorStore = useErrorStore(); fonction loc() { errorStore.locationError(); }

[Vue warn] : injection "Symbol(vuetify:defaults)" pas trouvé. à  at  > à  à  à  at  [Vue warn] : erreur non gérée lors de l'exécution de la fonction de configuration à  at  > à  à  à  at  [Vue warn] : erreur non gérée lors de l'exécution du vidage du planificateur. Il s'agit probablement d'un bug interne de Vue. Veuillez ouvrir un numéro sur https://new-issue.vuejs.org/?repo=vuejs/core à  at  > à  à  à  at  Erreur non interceptée (promise) : [Vuetify] Impossible de trouver l'instance par défaut à injectDefaults (defaults.ts:28:24) lors de l'installation (defineComponent.tsx:118:24) à callWithErrorHandling (runtime-core.esm-bundler.js:158:18) à setupStatefulComponent (runtime-core.esm-bundler.js:7236:25) à setupComponent (runtime-core.esm-bundler.js:7197:36) sur mountComponent (runtime-core.esm-bundler.js:5599:7) à processComponent (runtime-core.esm-bundler.js:5565:9) au patch (runtime-core.esm-bundler.js:5040:11) chez mountChildren (runtime-core.esm-bundler.js:5284:7) à mountElement (runtime-core.esm-bundler.js:5191:7)

import Toast from "vue-toastification"; import type { PluginOptions } from "vue-toastification"; const ToastOptions: PluginOptions = { shareAppContext: true, container: () => document.getElementById("app")!, }; app.use(Toast, ToastOptions);

répondre à tous (1)

P粉2535186202023-08-31 17:12:29 1 plancher

Les composants Vuetify doivent être encapsulés dans un élément VApp. Par défaut, le conteneur vue toastification est attaché au corps HTML (ce qui en fait un frère du conteneur VApp). Pour résoudre ce problème, vous pouvez ajouter le code suivant lors de l'installation du plugin vue toastification :

Container est l'élément sur lequel toast doit être monté : HTMLElement ou une fonction qui renvoie/analyse HTMLElement. L'élément Vuetify App doit être un div avec l'identifiant #app

Pour accéder à d'autres plugins globaux pouvant être utilisés dans le composant, tels que $t dans i18n, vous souhaiterez peut-être également accéder au contexte de l'application. Ceci peut être réalisé en ajoutant l'option shareAppContext.Plus d'informations