【Vue.js Nuxt.js】v-bindでhref属性に文字列とコンポーネントのプロパティを指定する

この記事の結論3行まとめ

• Vue.js・Nuxt.jsでは、v-bindや:（省略形）を使って動的にhref属性に値をバインドできる。
• 文字列とプロパティの組み合わせには、シングルクォートで囲った文字列とプロパティを連結して指定する。
• v-bindを活用することで、柔軟なリンク生成や動的なルーティングが簡単に実装可能。

こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。

このブログでは、

僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、

ノウハウなどを書いていきます。

今回は、

• 【Vue.js Nuxt.js】v-bindでhref属性に文字列とコンポーネントのプロパティを指定する

について書いていきます。

【Vue.js Nuxt.js】v-bindでhref属性に文字列とコンポーネントのプロパティを指定する

v-bindの記法は下記になります。

// 基本形
v-bind:属性名="プロパティ名"

// v-bindは省略可能
:属性名="プロパティ名"

• データバインディング構文 - vue.js

v1-jp.vuejs.org

例. taskコンポーネントが、nameというプロパティを持つ場合

<a v-bind:href="task.name">Name</a>

これで task.name をhref属性に指定したリンクが生成されます。

素の文字列とコンポーネントのプロパティを連結する場合

シングルクォートで囲った文字列 + プロパティ

のようにすればOKです。

• tasks/1/edit というpathにしたい場合

// idプロパティの値が「1」であるとする
// 通常の文字列はシングルクォートで囲う必要がある

<a v-bind:href="'tasks/' + task.id + '/edit'">編集</a>