コンポーネントを登録して、テンプレート内でv-bindを指定してもうまく表示されません。
初歩的な部分だと思いますが、ご教授願います。
html
1<div id="app"> 2 <component-txt title="タイトル1" content="内容1"></component-txt> 3</div>
js
1Vue.component('component-txt', { 2 template:` 3 <div> 4 <p>{{ title }}</p> 5 <p>{{ content }}</p> 6 <a :href="url">リンク</a> 7 </div> 8 `, 9 props: ['title','content'] 10}) 11 12 13 14new Vue({ 15 el: '#app', 16 data() { 17 return { 18 url: "https://google.com" 19 } 20 } 21})
実際の表示画面では以下の状態となります。
タイトル1
内容1
リンク(ここのリンクがついてくれない)
やりたいこと:
コンポーネントで再利用しながらpropsなどでURL部分をそれぞれ違うリンク先にしたい。
宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/20 03:05 編集
2020/11/20 03:10