2019.11.9
Vueでカクテルデータベースをリファインする話#19【タイトルバー】
調子いいときのプログラミング記事は書き溜めが錬成されてしまうのでいいですね
今まで触れてなかったタイトルバーなんですけど、思ったよりトリッキーなことをしないといけないっぽかったので記事にします。
そうしとかないとやり方忘れた時大変なんですよ
いろいろ方法はあって、標準のやりかただとタイトルバーの情報をまとめたファイルを錬成し、それをvue-routerで読み込んで使う･･････っていうやり方があるみたいなんですけど、やっぱり
タイトルバーの情報はコンポーネントに持たせたいということで探したところ、ライブラリがあるっぽいのでそれを使ってみようかと思います。
んで、これめちゃくちゃ簡単でした。
まずnpmで
vue-headをインストールしまして･･････
import VueHead from 'vue-head'
Vue.use(VueHead,{
complement: '宅飲みカクテルデータベース(RC)',
separator: '｜',
})
const vueHead = new VueHead();
const app = new Vue({
el: '#app',
vueHead
})
僕の場合これで充分でした。
Vue.use内で渡してるオブジェクトは初期設定ですね。要らなかったら空でいいと思うんですが、separatorは''でも渡しておかないと永遠にパイプライン(デフォルト)が表示されます。
んで、実際にコンポーネントに埋め込む場合･･････
head: {
title(){
return{
inner: this.categoryDetail.name + "("+this.categoryDetail.name_eng+")",
}
}
},
methods:{
init(cid){
axios.post(process.env.MIX_SENTRY_DSN_PUBLIC+'/api/categoryDetail', {id:cid})
.then( (response) =>{
var result=response.data.result;//結果を取得する
//結果を変数に格納する
this.categoryDetail=result.category
...
this.$emit('updateHead')
})
},
},
実際のコード貼り付けでアレなんですが、こうするとタイトルバーに「〜〜〜 | 宅飲みカクテルデータベース(RC)」って表示されます。
data()と同じで、リアクティブな値を埋め込む場合、titleもオブジェクトではなく関数を渡す必要があります。で、このままだと反映されないので対応する変数に値が代入されたあとemitしなければなりません。
ちょっとそこが残念なんですが、コンポーネント内にタイトルが書けるということでだいぶわかりやすい感じになったなって思います。特にmixinとか不要ですし。
ちなみに、親コンポーネントとかでタイトルが定義されてた場合そっちが優先されるみたいです。
管理画面が完成するまでアップロードはしないつもりなのでしばらくはこの変更は反映されませんが、タイトルバーの文字が置き換わったらこんな感じに実装されてんだなぁ〜って思っててください(笑)(笑)(笑)