私は、Vue 3 Comboposition api と Typescript を使用して、HammerJS パッケージを使用してピンチズームを実装しています。
私は、JavaScript で書かれた CodePen の動作例に従おうとしています: https://codepen.io/bakho/details/GBzvbB は Vue で実装されています。
ただし、Vue アプリで実行しようとしたときにいくつかの問題が発生し、修正方法がわかりません。
次のエラー:
リーリーこれは完全なソース コードです:
リーリー 何が問題なのか、そしてそれがなぜこの問題を引き起こすのか誰か教えてください。 オブジェクトは "null" である可能性があります
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これがこのエラーの理由です:
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 コンテンツにはアクセスできません。