Q&A
このような書き方もあるのですね。
ありがとうございますｍ(__)m
v-on:click で clickScroll を呼ぶとクリックした要素の位置まで移動するようになります。
@click="clickScroll" と一つのメソッドだけを記述すると動作しますが、@click="clickScroll; test" と複数メソッドを記述するとclickScrollが動作しません。
console.log(e) のようにして確かめてもクリック要素を取得できていません。
なぜクリックした要素を取得できないのでしょうか？
また、どのようにすれば複数メソッドを記述してもクリックした要素を取得できるのでしょうか？
ご存知の方いれば、教えてくださいm(__)m
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>vue</title> </head> <style> .list { width: 800px; display: grid; grid-template-columns: repeat(3, 266px); border-top: 1px solid #ccc; border-left: 1px solid #ccc; padding: 0; margin: 0; box-sizing: border-box; } .list_item { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; list-style: none; padding: 100px 30px; margin: 0; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; } </style> <body> <div id="app"> <h4>Vue</h4> <ul class="list"> <li class="list_item" v-for="(item) in items" @click="clickScroll; test"> {{ item.title }} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { items: [ { title: 'タイトル：あああああああああ' }, { title: 'タイトル：いいいいいいいいいい' }, { title: 'タイトル：ううううううううう' }, { title: 'タイトル：えええええええ' }, { title: 'タイトル：おおおおおお' }, { title: 'タイトル：かかかかかかかかかか' }, { title: 'タイトル：きききききききききき' }, { title: 'タイトル：くくくくくくくく' }, { title: 'タイトル：けけけけけけけ' }, { title: 'タイトル：ここここここここ' }, { title: 'タイトル：さささささささ' }, { title: 'タイトル：しししししし' }, { title: 'タイトル：すすすすす' }, { title: 'タイトル：せせせせ' }, { title: 'タイトル：そそそそ' }, { title: 'タイトル：たたたた' } ] }, methods: { clickScroll: function(e) { console.log(e); let targetRect = e.currentTarget.getBoundingClientRect(); window.scrollTo(0, window.pageYOffset + targetRect.top); console.log(window.pageYOffset + targetRect.top); }, test: function() { console.log('test'); } } }); </script> </body> </html>
回答3件
0
ベストアンサー
インラインメソッドハンドラでは、$eventという変数を利用することでイベントを渡すことが出来ます。
以下のようにすれば、イベントを取得できないでしょうか？
<li class="list_item" v-for="(item) in items" @click="clickScroll($event); test($event)">
投稿2018/07/04 04:40
総合スコア270
0
確かに
@click="clickScroll; test"
では動作しませんね。
@click="clickScroll(); test();"
や
@click="clickScroll() + test()"
でもダメでした。
ここに書いている通り、定義した2つのメソッドを呼び出すメソッドを別で作ると期待通りの動作はさせられました。
scrollAndTest:function(e) { this.clickScroll(e); this.test(e); },
お試し下さい。
投稿2018/07/04 04:26
総合スコア351
他の方の回答が的確でしたね。
動作していないと書いてしまいましたが、euledgeさんの仰られたとおり、変数eに値が注入されていなかっただけで、メソッド自体は呼ばれていたようですね。
僕も勉強になりました！ありがとうございます！
0
にありますが、関数に()が足りないためではないでしょうか?
投稿2018/07/04 03:46
総合スコア2404
<li class="list_item" v-for="(item) in items" @click="clickScroll(); test()"> と記述しても、クリックした要素を取得できないようです；；
イベント自体は、認識されているようです。下記に実行確認したものを置いておきます。
https://jsfiddle.net/euledge/dbzw17hL/
動かないように見えるのは clickScroll メソッドの中の処理でエラーが起きているからではないかと思います。
回答ありがとうございましたm(__)m
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/07/04 04:50
2018/07/04 04:51