【Nuxt.js + contentful】a hrefでエラーが出た。→ 解決した。
どんな状態でエラーが出たか
1. ContentfulでURLフィールドを作成し、URLを記入した
2. Nuxt.jsのvueに下記のようにリンクを書いた
<a href="{{post.fields.url}}">{{post.fields.url}}</a>3. すると、下記のようなエラーが表示された。
Errors compiling template:
href="{{post.fields.url}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
解決方法
上記のエラーを確認すると
『<div id="{{ val }}">ではなく <div :id="val"> を使用してね』
と言っています。
ということで、リンクの書き方を下記に修正。
<a :href="post.fields.url">{{post.fields.url}}</a>これでうまくリンクさせることができました。
以上です。Vueの学習が必要だ。
いいなと思ったら応援しよう！
