ディレクティブ（v-bind, v-on）の動的引数 [Vue.js]

Vue.jsのv-bindディレクティブを使用すると、HTML要素の属性に値をバインドすることができます。

v-bindディレクティブでは、「v-bind:」に続けて属性名を指定することで、属性に値（または式）をバインドすることができます。

<要素 v-bind:属性名=値または式></要素>

1	<要素 v-bind:属性名=値または式></要素>

v-bindディレクティブの通常の書式では属性名をHTMLに記述しますが、属性名はJavaScriptの式から設定することもできます。

v-bindディレクティブと並んでよく使用するディレクティブにv-onディレクティブがあります。
v-onディレクティブを使用すると、HTML要素のイベントにメソッド（または式）をバインドすることができます。

v-onディレクティブでは、「v-on:」に続けてイベント名を指定することで、イベントにメソッド（または式）をバインドすることができます。

<要素 v-on:イベント名=メソッドまたは式></要素>

1	<要素 v-on:イベント名=メソッドまたは式></要素>

v-onディレクティブの通常の書式ではイベント名をHTMLに記述しますが、イベント名はJavaScriptの式から設定することもできます。

そこで今回は、v-bindディレクティブで指定する属性名や、v-onディレクティブで指定するイベント名を動的に指定する方法について紹介します。

1 ディレクティブの動的引数
2 v-bindディレクティブの動的引数の指定例
- 2.1 サンプルコード
- 2.2 出力されるHTML
3 v-onディレクティブの動的引数の指定例
- 3.1 サンプルコード
4 動的引数利用時の注意点

ディレクティブの動的引数

v-bindディレクティブの属性名、v-onディレクティブのイベント名は、静的に指定する場合は以下のように記述します。

<a v-bind:href="url"
   v-on:click="onClick">
  リンク
</a>

<a v-bind:href="url"

v-on:click="onClick">

リンク

</a>

上記のコードでは、v-bindディレクティブの属性名に「href」、v-onディレクティブのイベント名に「click」を指定しています。
この属性名とイベント名は[]で囲んで指定（ブラケットで指定）することにより、JavaScriptの式の値から動的に生成することができます。
これを「動的引数」と言います。

v-bindディレクティブの動的引数の指定例

以下にv-bindディレクティブの属性名を動的引数によって指定する例を示します。

サンプルコード

ここでは、a要素（タグ）の属性名を動的引数によって指定する例を示します。

HTML

<div id="app">
  <a v-bind:[attribute]="url">
    リンク
  </a>
</div>

リンク

</a>

</div>

JavaScript

Vue.createApp({
  data: function() {
    return {
      attribute: 'href',
	  url: 'https://johobase.com/'
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

attribute: 'href',

url: 'https://johobase.com/'

}

}).mount('#app')

上記の例ではdataオプションに定義した属性名（attribute）に「href」を指定しているので、a要素のhref属性にurlの値がバインドされます。

出力されるHTML

上記のサンプルコードを実行（ブラウザーで表示）すると以下のHTMLが出力されます。

<div id="app" data-v-app="">
  <a href="https://johobase.com/"> リンク </a>
</div>

</div>

v-onディレクティブの動的引数の指定例

以下にv-onディレクティブのイベント名を動的引数によって指定する例を示します。

サンプルコード

ここでは、button要素（タグ）のイベント名を動的引数によって指定する例を示します。

HTML

<div id="app">
  <button v-on:[event]="onClick">
    ボタン
  </button>
</div>

ボタン

</button>

</div>

JavaScript

Vue.createApp({
  data: function() {
    return {
      event: 'click'
    }
  },
  methods: {
    onClick: function() {
	  alert('ボタンがクリックされました。');
	}
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

event: 'click'

}

methods: {

onClick: function() {

alert('ボタンがクリックされました。');

}

}).mount('#app')

上記の例ではdataオプションに定義したイベント名（event）に「click」を指定しているので、button要素のclickイベントにonClickメソッドがバインドされます。

動的引数利用時の注意点

v-bindディレクティブ、またはv-onディレクティブで使用する動的引数の名前に、大文字が含まれる場合は注意が必要です。

Vue.jsの公式ドキュメントには以下の記載があります。

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

XHTML

 <a v-bind:[someAttr]="value"> ... </a>

1
2
3
4
5


<a v-bind:[someAttr]="value"> ... </a>