質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

2009閲覧

vue-headでWP REST APIから取得したデータを格納できない

Vegas

総合スコア6

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2017/05/04 11:07

編集2017/05/04 11:15

vue.jsとWP REST APIを利用してブログサイトのフロントエンドを構築しようとしています。
個別記事ページのmetaタグの設定をしたく、vue-headを採用したのですが、dataに格納した配列から要素を取得しようとしても反映されません。

ソースコード

Post.vue
my.domainは自分のドメイン、this.$root.post_idは記事ID

const app = { name: 'post', data () { return { item: [] } }, created: function () { this.$http.get('my.domain/wp-json/wp/v2/posts/' . this.$root.post_id).then((response) => { this.item = response.data }) }, head: { title: function () { return { inner: this.item.title.renderd, separator: '|' } } } } export default app

通常dataに配列を書いたものはテンプレートタグとして表示されるのですが、head:{}に関してだけうまく取得できません。
どうにかitem[]から取得したいので、ご教授のほどよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

公式のmethodsを使ったUpdate方法ではデータ更新されかったので、beforeCreateを使い力技で更新した。

const app = { name: 'post', data () { return { item: [], title: '' } }, created: function () { this.$http.get('my.domain/wp-json/wp/v2/posts/' . this.$root.post_id).then((response) => { this.item = response.data }) }, head: { title: function () { return { inner: this.title, separator: '|' } } }, beforeCreate: function () { var self = this window.setTimeout(function () { self.meta.title = self.item.title.renderd self.$emit('updateHead') }, 1000) } } export default app

投稿2017/05/05 08:05

Vegas

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問