vue-headで動的にhead metaを変えたときのメモ
背景
vueを使ってて
タグ内のタグを動的に追加する必要があったので、vue-headで対応したときのメモです。※説明に公式のドキュメントをかぶる点あり。
GitHub - ktquez/vue-head: Manager the meta information of the head tag, a simple and easy way
作業
取り込み
<script src="https://cdn.rawgit.com/ktquez/vue-head/master/vue-head.js"></script>
JS
- headパラメータを追加して、追加するmetaを定義
- vue側のdataを使いたい場合は、headはfunctionじゃないとだめ。
- 「this.$emit('updateHead');」しないとhtmlへ変化が更新されない。
new Vue({ el: '#hoge', data () { return { x: {}, }; }, head: { meta () { return [ { name: 'og:foo', content: this.x }, ]; }, }, mounted () { axios.get('/api') .then(res => { this.x = res.x; }); }, updated () { this.$emit('updateHead'); },
まとめ
ここまでやったけど、動的に追加したmetaタグを使ってくれないサービスがあるので注意(twitterのcardとか)(´・ω・`)