vue-cliにて、「v-for」でレンダリングした要素の中の「v-on」で指定したメソッドを動的に変更したい

Question

やりたい事はタイトル通りで、以下のコード（.vueファイル内の不要な部分を削ってhtmlとJavaScritpで分けて記述しています）でv-forで取得したindexの数字を使って「show0~7」というmethodを呼び出そうとしています。
ただこの方法では動きませんでした。
ちなみに「show」はモーダルを呼び出す関数で、それにvue-js-modalというライブラリを使用しています。

他にもいくつか試したのですが、v-onの中に変数を使う方法はどれも駄目でした。
公式のリファレンスを読んでもこのような使い方は載っておらず、手詰まりになってしまっています。

なにか良い方法はあるのでしょうか、よろしければお力添えをお願いいたします。

<section>
  <div class="skills-box">
    <div class="skills" v-for="(skill, index) in skills">
      <img v-bind:src="require(`../assets/images/${skill}.png`)">
      <h2>{{ skill }}</h2>
      <a class="open-details" v-on:click=`show${index}`>Details <i class="fas fa-angle-right"></i></a>　<!--　動かない部分です　-->
    </div>

    <modal name="html" :width="400" :height="400"> <!-- このnameの部分を使ってshowで呼び出しています　-->
      <div class="modal-wrapper1">
        <div class="bg-wrapper">
          <h2>HTML</h2>
          <p>text</p>
        </div>
      </div>
    </modal> <!--このようなモーダルが後7つ続きます-->

  </div><!-- skills-box -->
  <router-link to="/"><i class="fas fa-angle-left"></i> BACK</router-link>
</section>

data() {
  return {
    skills: [
      'HTML', 'CSS', 'JavaScript', 'Vue.js', 'Sass', 'Firebase', 'Git・Github', 'webpack'
    ]
  }
},
methods: {
  show0: function() {
    this.$modal.show('html'); //'html'の部分がモーダルのnameです。
  },
  show1: function () {
    this.$modal.show('css');
  },
  show2: function () {
    this.$modal.show('javascript');
  },
  //show...と7まで続きます
},

Answer 1

こちらでも再現してみましたが、v-on:clickは正常に作用し、skillの値を渡すことができました。

show: function(skill) {
　alert(skill)
}

このようにしても、skillの中身は表示されませんでしょうか？

Comments

[take-t.t.]

今先程と同じコードを入力してみた所、正常に動作しました。
一度消してしまったので分かりませんが、恐らくスペルミスか何かだろうと思われます。
よく確認せず、vue-js-modalの仕様上出来ないのかと勝手に決めつけておりました。
こちらのミスでご迷惑をおかけして申し訳ありません。

そして改めまして、二度もご回答していただきありがとうございました。
こういった使い方を知らなかったので、とても勉強になりました。

[ttakatech]

お力になれて何よりです。
こちらこそありがとうございました。

Answer 2

関数showの詳細がわからないのでなんとも言えませんが、関数showの引数としてskillsのvalueやindexを渡す方法はいかがでしょうか。

例：v-on:click=show(index)

こんな感じです。

Comments

[take-t.t.]

ご回答ありがとうございます。
その方法を試してみたのですが、残念ながら思い通りの動作にはなりませんでした。

v-on:click="show(skill.toLowerCase())"として、
show: function(skill) {
this.$modal.show(skill);
}
としてみたのですが、.showの中にskillの値が渡せませんでした。

それと詳細を記載せずに申し訳ありませんでした、一度質問文を書き換えました。