Q&A
#前提・実現したいこと
タブを押すとタブ内のコンテンツが表示できる様にしたいです。
現状ソースでは、最初にコンテンツ1の内容は表示できるものの、
その後タブをクリックすると表示が消えてしまう状態です。
タブ内のコンテンツに関しては、画像など色々と入れる予定なのでHTML側に書きたいので、
こちらの記事の"タブで切り替えるHTMLで書く方法"という箇所を参考にしましたがうまく表示できません。
ご存知の方いらっしゃいましたらご教示頂けると幸いです、よろしくお願いします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 </style> 8</head> 9<body> 10 <div id="app" v-cloak> 11 <ul> 12 <li v-for="tab in tabNav" @click="changeTab($index)">{{ tab }}</li> 13 </ul> 14 <div v-if="contents == 0"> 15 コンテンツ1 16 </div> 17 <div v-if="contents == 1"> 18 コンテンツ2 19 </div> 20 <div v-if="contents == 2"> 21 コンテンツ3 22 </div> 23 </div> 24 <script src="https://unpkg.com/vue/dist/vue.js"></script> 25 <script> 26 new Vue({ 27 el: '#app', 28 data: { 29 scrollY: 0, 30 tabNav: [ 31 'JavaScript', 32 'PHP', 33 'HTML' 34 ], 35 contents: 0 36 }, 37 methods: { 38 changeTab: function (index) { 39 this.contents = index; 40 alert("click"); 41 } 42 } 43 }) 44 45 </script> 46</body> 47</html>
回答1件
0
ベストアンサー
Vue.js の 2.xでは $index は使えなくなっているので
html
1<li v-for="(tab, index) in tabNav" @click="changeTab(index)">{{ tab }}</li>
こんな感じでイテレーターで index を受け取るといいです。
投稿2017/10/19 07:54
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/19 08:31