Django + Vue.js で、配列の中身を順番に表示させようとしています。
具体的には、
[進む]ボタンをクリックするたびに、配列の1番目、2番目・・・が表示され、
[戻る]ボタンをクリックするたびに、配列の最後から順番に表示が隠れます。
ボタンをクリックした場合には、上記は実現可能です。
キーボードの左右キーを押下した際にも同様になるようにしたいですが、以下の課題があります。
■課題
・一度[進む]ボタンをクリックしないとキーボードの右キー操作が有効にならない。
・左キー操作については反応なし
※console のログを見る限りでは、キーボードを押下はキャッチで来ている模様。
課題の解決策を教えていただけますとありがたいです。
以下、テンプレートに使用している html ファイルです。
html
1{% extends 'base.html' %} 2 3{% block content %} 4 <div class="content" id="content" v-on:keydown.right="showNextContent()"> 5 <button v-on:click="hideLastContent">戻る</button> <button v-on:click="showNextContent()">進む</button> 6 <div v-for="value in object"> 7 <div v-html="value"> 8 [[ value ]] 9 </div> 10 </div> 11 </div> 12{% endblock %} 13 14{% block extrajs %} 15 <script> 16 const contentArray = ("abcdefghij") 17 </script> 18 <script> 19 20 </script> 21 <script> 22 var content = new Vue({ 23 el: '#content', 24 delimiters: ['[[', ']]'], 25 data: { 26 object: [] 27 }, 28 mounted() { 29 window.addEventListener('keydown', function(e){ 30 console.log(e.keyCode) 31 console.log(this.object.length) 32 if (e.keyCode === 39) { 33 this.showNextContent 34 } else if (e.keyCode === 37) { 35 this.hideLastContent 36 } 37 }); 38 }, 39 methods: { 40 showNextContent: function(){ 41 console.log(this.object.length) 42 console.log('show') 43 if (this.object.length < contentArray.length) { 44 this.object.push(contentArray[this.object.length]) 45 } 46 }, 47 hideLastContent: function(){ 48 console.log('hide') 49 if (this.object.length > 0) { 50 this.object.splice(this.object.length-1,1) 51 } 52 }, 53 } 54 }) 55 </script> 56{% endblock %}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/27 08:51
退会済みユーザー
2019/01/27 09:07
2019/01/27 09:24