Vue 3 構成 API - 空の可能性のあるオブジェクト
P粉821808309
P粉821808309 2023-11-08 13:04:14
0
1
686

私は、Vue 3 Comboposition apiTypescript を使用して、HammerJS パッケージを使用してピンチズームを実装しています。

私は、JavaScript で書かれた CodePen の動作例に従おうとしています: https://codepen.io/bakho/details/GBzvbB は Vue で実装されています。

ただし、Vue アプリで実行しようとしたときにいくつかの問題が発生し、修正方法がわかりません。

次のエラー:

リーリー

これは完全なソース コードです:

リーリー

何が問題なのか、そしてそれがなぜこの問題を引き起こすのか誰か教えてください。 オブジェクトは "null" である可能性があります

P粉821808309
P粉821808309

全員に返信(1)
P粉752826008

これがこのエラーの理由です:

  • const imageContainer = ref(null) -> 値を null に設定すると、オブジェクトのプロパティにアクセスするとエラーがスローされる可能性があると TypeScript が警告します。初期値は null で、テンプレート内で ref を使用しようとしているため、要素が存在する場合と存在しない場合があります。

  • const imageContainer = document.querySelector('.imageContainer') -> HTML 要素の有無をクエリしているため、null## も取得できることになります。 # を値として指定すると、TypeScript はオブジェクトのプロパティにアクセスするとエラーがスローされる可能性があることを再度警告します

  • ###解決:###

実際に

setup
    関数から
  • setup 変数を返す必要があります。これにより、Vue はそれをテンプレート内の ref にバインドし、 # で使用できるようにします。 ##onMounted 変数は ref であるため、関数内でアクセスされます。これは、変数が DOM にマウントされていないことを意味します。 setup は、Vue.js コンポーネントのライフサイクルの created フックと mounted フックの前に呼び出されます。これらのフック内の DOM コンテンツにはアクセスできません。 リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート