メインコンテンツへスキップ
バージョン：v8

トラブルシューティング

このガイドでは、Ionic Vueで開発する際に発生する可能性のある一般的な問題について説明します。

ここに記載すべきだと思う問題がありますか？お知らせください！

コンポーネントの解決に失敗しました​

[Vue warn]: Failed to resolve component: ion-button

この警告が表示される場合は、コンポーネントを@ionic/vueからインポートしていない可能性があります。デフォルトでは、すべてのIonic Vueコンポーネントはローカルに登録されるため、使用するたびにインポートする必要があります。

コンポーネントをインポートしないと、基になるWeb Componentのみが取得され、v-modelなどのVue固有の機能は動作しません。

この問題を解決するには、コンポーネントを@ionic/vueからインポートし、Vueコンポーネントに提供する必要があります。

<template>
  <ion-button>Hello World</ion-button>
</template>

<script lang="ts">
  import { IonButton } from '@ionic/vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    components: { IonButton },
  });
</script>

コンポーネントをグローバルに一度登録することを推奨しますか？ご安心ください。「ビルドの最適化ガイド」では、Ionic Vueコンポーネントをグローバルに登録する方法と、このアプローチを使用する際に注意すべき潜在的な欠点を示しています。

スロット属性は非推奨です​

`slot` attributes are deprecated  vue/no-deprecated-slot-attribute

Ionic Vueで使用されているスロットは、Webコンポーネントスロットであり、Vue 2で使用されているスロットとは異なります。残念ながら、両方のAPIは非常によく似ており、リンターが2つを混同している可能性があります。

すべてのIonic Vueスターターにはこのルールが無効になった状態で同梱されていますが、.eslintrc.jsファイルに次を追加することで、自分で有効にすることができます。

module.exports = {
  rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  },
};

VSCodeを使用していて、Veturプラグインがインストールされている場合、この警告はESLintではなく、Veturが原因で発生している可能性があります。デフォルトでは、VeturはデフォルトのVue 3 lintingルールをロードし、カスタムESLintルールを無視します。

この問題を解決するには、vetur.validation.template: falseを使用してVeturのテンプレート検証をオフにする必要があります。詳細については、Vetur Linting Guideを参照してください。

コンポーネントのメソッドは関数ではありません​

VueのIonic Frameworkコンポーネントのメソッドにアクセスするには、まず基になるWeb Componentインスタンスにアクセスする必要があります。

// ✅ This is correct
ionContentRef.value.$el.scrollToBottom();

// ❌ This is incorrect and will result in an error.
ionContentRef.value.scrollToBottom();

Ionic Reactなどの他のフレームワーク統合では、提供するrefがすべて基になるWeb Componentインスタンスに自動的に転送されるため、これは必要ありません。Vueがrefsを管理する方法の制限により、ここでは同じことができません。

詳細については、クイックスタートガイドを参照してください。

ページトランジションが機能していません​

ページトランジションが正しく機能するためには、各ページはルートにion-pageコンポーネントを持っている必要があります。

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">Hello World</ion-content>
  </ion-page>
</template>

<script lang="ts">
  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    components: {
      IonContent,
      IonHeader,
      IonPage,
      IonTitle,
      IonToolbar,
    },
  });
</script>

詳細については、IonPageドキュメントを参照してください。

JavaScriptでバインドされたIonicイベントが発火していません​

JavaScriptでイベントリスナーを作成する場合（例：addEventListener）、イベント名はケバブケースで記述する必要があります。

const modal = await modalController.create({
  component: Modal
});

modal.addEventListener('ion-modal-did-present', () => {
  ...
});

await modal.present();

これは、開発者がケバブケースを使用してVueテンプレートでイベントをバインドする方法に合わせるためです：https://vuejs.org/guide/essentials/component-basics.html#case-insensitivity

目次

このページを編集