MAGAZINE

Twitter
Facebook

Vue.jsで、ボタンをクリックしたときに、別のVueインスタンスのメソッドにデータを渡す実装を行った。

jsを使用することでリロードを発生させずに再描画することが目標

 

イメージした完成形

  1. wordpressの投稿カテゴリをボタンとして表示
  2. そのボタンをクリックしたら、投稿内容を変更する

 

動作ロジック

  1. 初期に全投稿データから表示数分だけ取得して描画【Vue.js(投稿取得)】
  2. カテゴリIDとボタンの順番を取得【PHPを使用】
  3. 取得したデータを配列として保存【Vue.jsを使用】
  4. 1で取得している投稿データを3のデータを使用して書き換える

 

実装方法

WordPressのカテゴリを取得

 

カテゴリをPHPで取得する(PHPとVue.jsを併用)

イベントハンドリング

イベントハンドリング例

Vueでクリックした箇所とその情報を取得するために、イベントハンドリングを使用しておく

イベントハンドリングとは

ここでは、カテゴリIDと、ボタンの順番をVueで受け取れるように記入する

※ここでの【exampBtn】は、後述するJs内に書いておく、methods(function)です

WordPressの投稿を取得

WordPressのWp Rest APIを使用してVue.jsで描画

※上記の【BASEURL】は、WP Rest APIのパスを代入しておいた変数です

カテゴリ取得部分の【インスタンス】から、投稿取得部分への【インスタンス】へデータを渡す

インスタンスからインスタンスへデータを渡す

例)
インスタンス名.データ名

今回の場合は下記
postInstance.postsOrigin

これで、exampInstance内のmethodsから、postInstanceのpostsOriginデータに取得データを代入できる

備考

今までインスタンス名を定義する際に、constを使用していました。

ですがデータを受け渡し、中身を書き換えるので、再代入不可能な変数であるconstは使用できません。

そのため、varで宣言しています。

よくvarの代わりにletで宣言するという、解説をされているサイトが多く散見されますが
letはブロックスコープのため、ブロック外からのアクセスはできません。
※本来であれば、全体に影響しないconstやletを扱うべきです。
今回はブロック外でデータをやり取りするので行った変則的な組み込みです。

今回はインスタンスで、異なるブロックへデータの受け渡しをするので、letは使用できません。