発生している問題・エラーメッセージ
実現したいことは「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>
回答1件
あなたの回答
tips
プレビュー