Q&A
http://jsfiddle.net/eywraw8t/401155/ 試しに作ってみたんですが、正常に動きますね... Vue.jsのバージョンはいくつですか。また、完全に再現できるコードをご提示ください。
発生している問題・エラーメッセージ
実現したいことは「vue.js」にて、下記のcomponentで「v-on:scroll="handleScroll"」の指定をしても「handleScroll」メソッドが実行されてくれません。
「v-on:click」などに変更するとクリック時に「handleScroll」メソッドが実行されるのでメソッドの宣言などは正しくは動作していると考えております、対応方法などアドバイス頂ければと考えております。
該当のソースコード
JavaScriopt
1<template> 2 <div class="item-container" v-on:scroll="handleScroll" > 3 ..... 4 </div> 5</template> 6 7export default { 8 name: "taglist", 9 data() { 10 return { 11 }; 12 }, 13 methods: { 14 handleScroll(event){alert("TEST")}, 15 }, 16}; 17</script> 18
試したこと
下記のように自分でイベントをwindowに追加したら動作したのですが、できれば「v-on:scroll」で指定出来ないかと考えております。
JavaScriopt
1 created() { 2 window.addEventListener('scroll', this.handleScroll); 3 }, 4 destroyed() { 5 window.removeEventListener('scroll', this.handleScroll); 6 },
構成につきまして
vue.jsのバージョン「2.9.6」を使用しております。
VueRouterを使用して入れ子になっており、scrollのeventを記載していますのは子コンポーネントのリスト表示の部分となります。
Vue CLIを使用して「vue init weebpack my-app」で構成を作成した後、vue routerへ下記の設定を行いました。
JavaScriopt(index.js)
1import Vue from 'vue' 2import Router from 'vue-router' 3import HelloWorld from '@/components/HelloWorld' 4import DataTest from '@/components/DataTest' 5 6Vue.use(Router) 7export default new Router({ 8 routes: [ 9 { 10 path: '/', 11 name: 'HelloWorld', 12 component: HelloWorld, 13 children: [ 14 { 15 path: '', 16 component: DataTest, 17 } 18 ] 19 } 20 ] 21})
親コンポーネント
JavaScriopt(HelloWorld.vue)
1<template> 2<div> 3 <div class="container"> 4 <div class="row"> 5 <main class="col-12 col-md-8 "> 6 <router-view/> 7 </main> 8 </div> 9 </div> 10</div> 11</template> 12 13<script> 14export default { 15 name: 'layout', 16} 17</script>
子コンポーネント（scrollのeventを設定）
JavaScriopt(DataTest.vue)
1<template> 2 <div v-on:scroll="handleScroll" > 3 <div v-for="item in items" v-bind:key="item.id" > 4 <p>aaaaa</p> 5 </div> 6 </div> 7</template> 8 9<script> 10export default { 11 name: "taglist", 12 data() { 13 return { 14 items: [ 15 {id:"1"}, 16 {id:"2"}, 17 {id:"3"}, 18 {id:"4"}, 19 {id:"5"}, 20 {id:"6"}, 21 {id:"7"}, 22 {id:"8"}, 23 {id:"9"}, 24 ] 25 }; 26 }, 27 methods: { 28 handleScroll(event){ 29 console.log("TEST"); 30 }, 31 } 32}; 33</script>
vue.jsのバージョンですが「2.9.6」となります。
少し構成情報を追記させて頂きました、お手数をお掛けして大変申し訳ありませんでした。
スクロールイベントを取ろうとしているdiv要素にスタイルが当たっているように見えないのですが、そのdivにはスクロールバーがあるのでしょうか？
windowのscrollイベントが取得できると考えていました。つまり内部の子コンポーネントのeventでは、親やwindowのscrolleventが取得できないとゆうことですね... お恥ずかしながら、子要素にもeventが伝わるか、どうにかうまく取得できると考えてました。勉強不足にてご迷惑をおかけしました。
回答1件
0
ベストアンサー
DOMイベントというのは、「バブリング」といって親要素に向かって伝播していく性質はもっていますが、子要素に向かって伝播することはありません。
例えばこのような構成のとき
html
1<body> 2 <div> 3 <a>Link</a> 4 </div> 5</body>
<a>要素のクリックイベントは途中で意図的に止めない限り<div>にも<body>にも伝播するので、どちらからでもハンドリングできます。
しかし<div>要素のクリックイベントは、親に向かって伝播するので<body>からハンドリングすることはできても、<a>からはハンドリングできません。
ウィンドウ全体のscrollイベントはdocumentで発火するので、documentまたはwindowからのみハンドリングできます。
投稿2018/10/01 23:56
総合スコア1803
バタバタして、ご返信が遅くなり申し訳ありません。
ご回答ありがとうございました。○子->親(×親->子)への伝播について認識いたしました。
今回対応として、「試したこと」で記載した子コンポーネントの「create」にてWindowのscrollイベントのハンドラに子供のハンドラを追加することで対応することに致しました。
あなたの回答
tips
プレビュー
