Vuetify が Vue-Toastification でデフォルト値をロードできない
<p>私が試したのは、カスタム コンポーネントとトースト内のいくつかの Vuetify コンポーネントを使用した vue-toastification でした。 <code>npm create vuetify@latest</code> を使用してリポジトリを作成し、ライブラリ <code>npm i vue-toastification@latest</code> をインストールしました。次に、プラグインを使用しました: </p>
<pre class="lang-js prettyprint-override"><code>// main.ts
//乾杯
import Toast, { POSITION } from "vue-toastification";
import "vue-toastification/dist/index.css";
const app = createApp(App);
const オプション = {
shareAppContext: true, // https://github.com/Maronato/vue-toastification#access-global-components-and-plugins-inside-toasts より
位置: POSITION.BOTTOM_CENTER、
};
registerPlugins(アプリ);
app.use(トースト、オプション);
</code></pre>
<p>次に、次のコードを使用してトーストを呼び出してみました。</p>
<pre class="lang-js prettyprint-override"><code>// store/error.ts
import { useToast } from "vue-toastification";
"@/components/MyComponent.vue" から MyComponent をインポートします。
const トースト = useToast();
エクスポート const useErrorStore =defineStore("エラー", () => {
関数 locationError() {
トースト(MyComponent);
}
});
</code></pre>
<p>私のコンポーネント内: </p>
<pre class="lang-js prettyprint-override"><code>//コンポーネント/MyComponent.vue
<テンプレート>
<v-col> アラートの例 </v-col>
<v-btn @click="リロード">リロード</v-btn>
</v-col>
</v-row>
</v-container>
</div>
</テンプレート>
<スクリプトセットアップ lang="ts">
関数リロード() {
if (ウィンドウの種類 !== "未定義") {
window.location.reload();
}
}
</スクリプト>
</code></pre>
<p>App.vue ファイルから呼び出します。</p>
<pre class="lang-js prettyprint-override"><code>// App.vue
<テンプレート>
<v-アプリ>
<v-main>
<v-btn @click="loc">位置情報エラー</v-btn>
</v-main>
</v-app>
</テンプレート>
<スクリプトセットアップ lang="ts">
import { useErrorStore } from "./store/error";
const errorStore = useErrorStore();
関数 loc() {
errorStore.locationError();
}
</スクリプト>
</code></pre>
<p>しかし、実行時にボタンをクリックすると、次のエラーが表示されます。</p>
<pre class="brush:php;toolbar:false;">[Vue warn]: インジェクション「Symbol(vuetify:defaults)」が見つかりません。
で
at <MyComponent key=1 past-id=0 onCloseToast=fn<bound closeToast> >
<VtToast key="_default00"position="bottom-center"draggable=true ...> で
<TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... > で
<VtTransitiontransition="Vue-Toastification__bounce" class="Vue-Toastification__containerbottom-center" > で
at <VueToastificationeventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …}position="bottom -センター」 >
[Vue warn]: セットアップ関数実行中の未処理エラー
で
at <MyComponent key=1 past-id=0 onCloseToast=fn<bound closeToast> >
<VtToast key="_default00"position="bottom-center"draggable=true ...> で
<TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... > で
<VtTransitiontransition="Vue-Toastification__bounce" class="Vue-Toastification__containerbottom-center" > で
at <VueToastificationeventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …}位置=「中央下」 >
[Vue warn]: スケジューラ フラッシュの実行中に処理されないエラーが発生しました。これはおそらく Vue 内部のバグです。 https://new-issue.vuejs.org/?repo=vuejs/core で問題を開いてください。
で
at <MyComponent key=1 past-id=0 onCloseToast=fn<bound closeToast> >
<VtToast key="_default00" で位置=「中央下」ドラッグ可能=true ... >
<TransitionGroup タグ = "div" でenter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... >
<VtTransition トランジション = "Vue-Toastification__bounce" でclass="Vue-Toastification__container 下部中央" >
at <VueToastificationeventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …}position="bottom -センター」 >
キャッチされない (約束された) エラー: [Vuetify] デフォルトのインスタンスが見つかりませんでした
injectDefaults で (defaults.ts:28:24)
セットアップ時 (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)
mountComponent で (runtime-core.esm-bundler.js:5599:7)
processComponent で (runtime-core.esm-bundler.js:5565:9)
パッチ時 (runtime-core.esm-bundler.js:5040:11)
mountChildren で (runtime-core.esm-bundler.js:5284:7)
mountElement (runtime-core.esm-bundler.js:5191:7)</pre> で
<p>私错了何ですか？実行中にアニメーションコンポーネント内で Vuetify を使用することは禁止されていますか?</p>
<p>私たちはここで一例を作成しました。
全員に返信(1)返信します
P粉2535186202023-08-31 17:12:29
Vuetify コンポーネントは VApp 要素内でラップする必要があります。
デフォルトでは、vue トースト化コンテナーは HTML 本文にアタッチされます (VApp コンテナーの兄弟になります)。
この問題を解決するには、vue トースト化プラグインをインストールするときに次のコードを追加します。
リーリー
Container は、トーストをマウントする必要がある要素です。HTMLElement、または HTMLElement を返す/解析する関数です。
Vuetify App 要素は、ID #app を持つ div
である必要があります
i18n の $t など、コンポーネントで使用できる他のグローバル プラグインにアクセスするには、アプリケーション コンテキストにもアクセスしたい場合があります。これは、shareAppContext オプションを追加することで実現できます。 ＃＃＃詳しくは＃＃＃＃＃＃
返事
0
