- beforeEnter: (el) => {
+ beforeEnter(el){
beforeEnter メソッドの定義でアロー関数を使用しているため、関数内の this がコンポーネントを参照できていないのが原因だと思われます。
リファレンスにもその旨が記載されています。
アロー関数は this を介してコンポーネントのインスタンスにアクセスできないため、メソッドを宣言する際に使用することは避けてください。
Like!
Vue.jsでgsapからpropsの値を参照したいです
Q&AClosed
解決したいこと
gsapのアニメーションオブジェクトから、そのコンポーネントのpropsの値を参照したいです。
gsapのscrollTriggerによるスクロールアニメーションをVue.jsで使用しようと思い、以下のように記述をしました。
gsapのアニメーションは再利用できるようコンポーネント化し、parent.vueでimportしています。
Slide.vueでは、要素が画面内に入ってきたら左から右にスライドして表示されるようにしています。
コンポーネントの再利用性を高めるため、durationの値を親コンポーネントのpropsから受け取れるように、duration: this.durationと記述をしました。
Uncaught TypeError: Cannot read properties of undefined (reading 'duration')
propsで定義しているにも関わらず、undefinedとなってしまいます。
console.log()でpropsを出力したところ1と表示されていたので記述ミスというわけではなさそうです。
該当するソースコード
parent.vue
<template>
<Slide :duration="1">
<h2>Hello World</h2>
</Slide>
</template>
<script>
import slide from "./slide.vue";
export default {
components: { Slide },
};
</script>
Slide.vue
<template>
<transition name="slide" appear @before-enter="beforeEnter">
<slot></slot>
</transition>
</template>
<script>
import gsap from "gsap";
import scrollTrigger from "gsap/ScrollTrigger";
export default {
props: {
duration: {
type: Number,
},
},
methods: {
beforeEnter: (el) => {
gsap.registerPlugin(scrollTrigger);
gsap.fromTo(
el,
{
y: 100,
opacity: 0,
},
{
duration: this.duration, //ここでpropsのdurationを参照したい
y: 0,
opacity: 1,
scrollTrigger: {
trigger: el,
start: "top 90%",
},
}
);
},
},
};
</script>
自分で試したこと
transitionメソッドをenterに変えてみましたが変化はありませんでした。
thisを外したり、${}に入れてみましたが変化はありませんでした。
transition: 1 とすると想定通り動くのでpropsが参照できないこと以外に原因はないと思います。
一度dataでdurationを定義してdataの方を参照するように記述しても同じくundefinedと表示されてしまいました。
使用しているのは
vue: 3.2.13
gsap: 3.11.4
です。
お力をお貸し頂けると幸いです。
どうぞよろしくお願い致します。
0
2Answer
0
Comments
@szkknt
Questioner@prismrism様
ご回答ありがとうございます。
仰る通り、メソッドをアロー関数で定義していたためthisにアクセスできないことが原因でした。functionでメソッドを宣言したら正しく機能しました。
ご丁寧にありがとうございました。
gsapは詳しくないのですが、thisがVueインスタンスではなくなっているのではないかと思います。
一旦fromToから独立したところでthisからdurationを取得するように変更しても一緒でしょうか？
beforeEnter: (el) => {
gsap.registerPlugin(scrollTrigger);
+ const duration = this.duration;
gsap.fromTo(
el,
{
y: 100,
opacity: 0,
},
{
- duration: this.duration, //ここでpropsのdurationを参照したい
+ duration,
y: 0,
opacity: 1,
scrollTrigger: {
trigger: el,
start: "top 90%",
},
}
);
},
Like!
Comments
- @prismrismさんが正しいです、すみません。
@szkknt
Questioner@h_kono0707様
ご回答ありがとうございます。
@prismrism様の通り、アロー関数でメソッドを定義していたことが原因でした。
ありがとうございました。