やりたい事はタイトル通りで、以下のコード(.vueファイル内の不要な部分を削ってhtmlとJavaScritpで分けて記述しています)でv-forで取得したindexの数字を使って「show0~7」というmethodを呼び出そうとしています。
ただこの方法では動きませんでした。
ちなみに「show」はモーダルを呼び出す関数で、それにvue-js-modalというライブラリを使用しています。
他にもいくつか試したのですが、v-onの中に変数を使う方法はどれも駄目でした。
公式のリファレンスを読んでもこのような使い方は載っておらず、手詰まりになってしまっています。
なにか良い方法はあるのでしょうか、よろしければお力添えをお願いいたします。
html
1<section> 2 <div class="skills-box"> 3 <div class="skills" v-for="(skill, index) in skills"> 4 <img v-bind:src="require(`../assets/images/${skill}.png`)"> 5 <h2>{{ skill }}</h2> 6 <a class="open-details" v-on:click=`show${index}`>Details <i class="fas fa-angle-right"></i></a> <!-- 動かない部分です --> 7 </div> 8 9 <modal name="html" :width="400" :height="400"> <!-- このnameの部分を使ってshowで呼び出しています --> 10 <div class="modal-wrapper1"> 11 <div class="bg-wrapper"> 12 <h2>HTML</h2> 13 <p>text</p> 14 </div> 15 </div> 16 </modal> <!--このようなモーダルが後7つ続きます--> 17 18 </div><!-- skills-box --> 19 <router-link to="/"><i class="fas fa-angle-left"></i> BACK</router-link> 20</section>
JavaScript
1data() { 2 return { 3 skills: [ 4 'HTML', 'CSS', 'JavaScript', 'Vue.js', 'Sass', 'Firebase', 'Git・Github', 'webpack' 5 ] 6 } 7}, 8methods: { 9 show0: function() { 10 this.$modal.show('html'); //'html'の部分がモーダルのnameです。 11 }, 12 show1: function () { 13 this.$modal.show('css'); 14 }, 15 show2: function () { 16 this.$modal.show('javascript'); 17 }, 18 //show...と7まで続きます 19},
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/01 16:54 編集
2019/07/01 17:04