こんばんは！
今日は、個人的に面白いことを学んだので、備忘録も兼ねて、まとめてみます！
まだまだ初心者の身なので、本当に、個人的に面白いことですよ！
で、その面白いことっていうのが、タイトルにあるように、
「URLをフォームに入力してリスト表示したものを、クリックしたら、ちゃんとそのURLのページ(サイト)に遷移させたい！！っていう時のやり方」
です！
※Vue CLIを利用しています。
完成形
まず、実装完了した完成形からお見せします。
以下の画像のように、下線付きでURLが表示されるようにします！
上部の入力フォームからURL等入力して、直下にリスト表示するという仕様です。デザインの関係でテーブルになってますが、リストでも同じです。
URLに下線が入っていて、検索できるようになっていますね。
実装方法
それでは、実装方法を記述していきます。
実装にあたって、以下の投稿を参考にしました！
v-bindでaタグの属性値を動的に表現する。 ❏Vue.js❏
ディレクティブの中でも、引数を取ることができるv-bindを利用します。
Vue.js公式テンプレート構文
通常の場合
HTML部分では、
<a v-bind:href="url"> ... </a>
のように、記述します。
hrefという引数を取っています。
この引数hrefに、urlの値を渡します。
urlの値を渡すことで、リンクを有効にすることができるという仕組みです。
いつもの、HTMLでURLを渡す時と同じですね。
<a href="https://google.com">Google</a>
aタグのhrefにURLを記述し渡すことで、リンクが有効になりますよね。
それと同じことをVueでやっているのです。
(v-bindでは、省略記法で、:hrefで表記可能です。)
次に、Vue部分では、
new Vue({
el: "#app",
data: {
url: "https://google.com"
}
})
のように記述すれば、URLがクリックしたら、反応するようになります。
ユーザがフォームに入力したURLの場合は？？
今回、私が実装したいのは、上で例示したような書き方では実装できませんでした。
ユーザによる入力なので、ユーザによって使用するURLも異なります。
そんな時、どうするのか...
まず、Vue部分は、一部省略していますが、以下になります。
ここでは、url関連部分がどうなっているのかだけ注目して頂いたら良いかなと思います。
export default {
// 省略
data() {
return {
name: '',
area: '',
progress: '',
url: '' // ここ注目！
}
},
methods: {
onclick() {
this.$store.commit('addCompanies', {
company: {
name: this.name,
area: this.area,
progress: this.progress,
url: this.url // ここ注目！
},
})
this.name = '';
this.area = '';
this.progress = '';
this.url = ''; // ここ注目！
},
// 省略
}
一般的な、フォーム入力からリストに追加し、表示するための処理ですね。
そして、肝心なHTML部分が以下になります。
<a :href="company.url" target="_blank" rel="noopener noreferrer">
{{ company.url }}
</a>
aタグで囲われた、Mustache構文(二重中括弧)で記述されたデータバインディング部分に注目して下さい。
データバインディングは、プロパティの値を展開する際に行いますよね。
ユーザが入力したURLを、urlプロパティを展開することで、プロパティの中身を取り出します。
だから、リストにテキストとして、表示されるようになるのです。
このURLリンクを有効にするために、周りのaタグがあるのです。
それでは、aタグ部分に注目してみて下さい。
最初に例示したように、v-bind:hrefが省略記法で書かれているのがわかります。
hrefは、引数でしたね。
今回は、この引数hrefに、ユーザ任意のURLの値を渡す必要があります。
その方法は、
Mustache構文で、URLをテキスト展開するために利用した、company.urlプロパティを引数hrefに渡すのです。
これで、ユーザが入力した任意のURLでリンクが有効になります。
データバインディングにおいて、動的に表示を変化させる時と原理は同じ。
今回の例で言うと、Mustache構文内のcompany.urlプロパティの値が変更されれば、表示される値も変わりますよね。
URLのリンクの有効化でも、
company.urlプロパティが変更されると、hrefに渡すURLの値が変わり、遷移させるURLも変える必要がありますよね。
ユーザが値を入力し、submitすることで、nullになっていたプロパティにユーザが入力した値が渡され、そこで、プロパティが変更されます。
これで、任意のURLもリンクを有効にすることが無事、できました！
めでたし、めでたし！
長くなりましたが、ここまで読んでくださり、ありがとうございました。
何かあれば、コメントでお願い致します。