はじめに

vue.jsのドキュメントをコードを書きながら復習してたら詰んだのでメモ

動的引数とは

vue.js バージョン 2.6.0 から、角括弧で囲むことで JavaScript 式をディレクティブの引数に使うこともできます(引用: vue.jsドキュメント )

hoge.html

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id="app">
        {{ message }}
        <a v-on:click="doSomething">click</a>  <!-- clickするとdoSomethingを呼ぶ -->
        <a v-on:[eventName]="doSomething">click</a>
      　<!--ここに書かれている[eventName]が動的引数 -->
　　　　 <!-- eventNameの値をdataで設定することができる 今回でいうと値はclickとなる-->
      　<!-- なので　実際のページで見ると上と下どちらも同じように展開される。-->
      </div>
        <script>
          var app = new Vue({
            el: '#app',
            data: {
              message: "Hello Vue!",
              eventName: "click" //こちらでeventNameの値を設定
            },
            methods: 
              // clickすると呼び出させれる
              doSomething: function () {
                this.message = this.message.split('').reverse().join('')
              }
            }
          })
        </script>
    </body>
</html>

コード内での説明になってしまいましたが
これだけが動的引数ではありません。ただ今回はこちらで詰んでしまったので
こちらのみの説明になります。

今回詰んだ箇所

hoge.html

　　<!-- 省略 -->
    <a v-on:[eventName]="doSomething">click</a>
    <script>
        //---省略
          data: {
              message: "Hello Vue!",
              eventName: "click" 
            }
     </script>

今回はv-bindに設定されているeventNameという命名規則で詰みました。
ドキュメントだとそのままキャメルケースのままdataで設定すると値が参照できると書かれているのですが

実際にコンソールを見ると

[Vue warn]: Property or method "eventname" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See:

とでてきて
まあ何度もスペルミスしていないか確認したが間違ってなさすぎて逆に困った。

コンソールをずっと見てたら

Property or method "eventname"

キャメルケースで書いたはずなのにキャメルケースじゃ無くなっていることに気づいた。
そこで３つのパターンを検証してみた。

検証

htmlとjs側どちらもキャメルケースではない書き方。

hoge.html

   <!-- 省略 -->
    <a v-on:[eventname]="doSomething">click</a>
    <script>
        //---省略
          data: {
              message: "Hello Vue!",
              eventname: "click" 
            }
     </script>

結果

コンソールエラーなし

htmlのみキャメルケース

hoge.html

   <!-- 省略 -->
    <a v-on:[eventName]="doSomething">click</a>
    <script>
        //---省略
          data: {
              message: "Hello Vue!",
              eventname: "click" 
            }
     </script>

結果

コンソールエラーなし

jsのみキャメルケース

hoge.html


  <!-- 省略 -->
    <a v-on:[eventname]="doSomething">click</a>
    <script>
        //---省略
          data: {
              message: "Hello Vue!",
              eventName: "click" 
            }
     </script>

結果

コンソールエラーあり

という結果でした。
３つの検証を元に動的引数の参照元のデータはキャメルケースでは参照できないことがわかりました。

バージョンでの検証

僕の知識がなさすぎの原因とも思い
動的引数が適応された2.6.0を指定して、動かしてみたが結果は変わらなかった。

おわりに

今回動的引数についていろいろ検証してみましたが
確証的な結果ではないのでわかるかたいらっしゃいましたら
ご教授お願いいたします。

追記

しっかりドキュメントを下まで読んでみるとあった（ごめんなさい）

in-DOM テンプレート (HTML ファイルに直接書かれるテンプレート) を使う場合、ブラウザが強制的に属性名を小文字にするため、キー名を大文字にするのは避けるべきです:(引用: vue.jsドキュメント )

とのことです。大文字にするのは避けましょう。
スネークケースでも一応通りました。

参照記事

Vue.jsドキュメント
 キャメルケース