hrefにvueの{{}} を使用したい

Question

【環境】
vue2.5.17
vue-router3.1.3
vue-template-compiler2.6.10
Laravel5.8.35

【やりたいこと】
vue.jsを使用して、href部分に{{}}を使用し、DBから取得したURLを表示させたい。
DBから取得した{{ account.nickname }}にツイッターのユーザー名が入り、動的にURLが変わる様にしたい。

【ソースコード】
(MypagePanel.vue)

<section class="p-panel">
    <div class="p-panel__account">
      <div class="p-panel__img"><a class="c-img__circle" href="https://twitter.com/{{ account.nickname }}"><img class="c-img__icon" :src="account.avatar" alt="Twitterのアイコン"></a></div>
      <div class="p-panel__name">
        <div class=""><a href="#">{{ account.name }}</a></div>
        <div class=""><a href="#">@{{ account.nickname }}</a></div>
      </div>
    </div>

(Mypage.vue)

<template v-if="twitterAccounts && twitterAccounts.length > 0">
      <mypage-panel
        v-for="(twitterAccount, index) in twitterAccounts"
        :key="index"
        :account="twitterAccount"
      />
    </template>

よろしくお願いします。

Answer 1

Vue.jsの{{}}構文が使えるのは、テキスト部分だけです。
hrefなどの属性には、v-bindディレクティブを使用します。

<!-- できる -->
<a>{{ account.nickname }}</a>

<!-- できない -->
<a href="https://twitter.com/{{account.nickname}}"></a>

v-bind:attr="value"または:attr="value"という構文で、attrという名前の属性にvalueという値をバインディング（束縛、対応させる）できます。ここで、valueの部分はJavaScriptとして解釈されます。

rei0さんのコードでも行なっていると思うので、ここは理解されていると思います。

// img要素のsrc属性にaccount.avatarの値をバインディングしている
<img :src="account.avatar">

---

今回は、href属性のURL(文字列)の一部が動的に決まるので、JavaScriptのテンプレートリテラルを使って、変数を文字列に展開するのが良さそうです。

<a v-bind:href="`https://twitter.com/${account.nickname}`">
  {{ account.nickname }}
</a>

Comments

[rei0]

ありがとうございます、解消しました！

[NozomuIkuta]

解決したようでよかったです。