Vue.jsで別のインスタンスのメソッドへデータを渡す方法

MAGAZINE

: Twitter

: Facebook

KEYWORDS: Javascript Vue.js

Vue.jsで別のインスタンスのメソッドへデータを渡す方法

WEB

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

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

イメージした完成形

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

動作ロジック

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

実装方法

WordPressのカテゴリを取得

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

<div id="examp" class="work__categories">
  <?php $terms = get_categories(); ?>
  <?php foreach ($terms as $key => $term): ?>
    <button type="button" @click="exampBtn(<?php echo $term->term_id; ?>, <?php echo $key; ?>)">
      <?php echo $term->name; ?>
    </button>
  <?php endforeach; ?>
</div>

<?php $terms = get_categories(); ?>

<?php foreach ($terms as $key => $term): ?>

<?php echo $term->name; ?>

</button>

<?php endforeach; ?>

</div>

if (document.getElementById('examp')) {
  var exampInstance = new Vue({
    el: "#examp",
    methods: {
      exampBtn(catid,i) {
        if(!postInstance.postsOrigin[i]) {
          postInstance.postsOrigin[i] = catid
        }
        postInstance.btn(i)
      },
    },
  });
}

if (document.getElementById('examp')) {

var exampInstance = new Vue({

el: "#examp",

methods: {

exampBtn(catid,i) {

if(!postInstance.postsOrigin[i]) {

postInstance.postsOrigin[i] = catid

}

postInstance.btn(i)

});

}

イベントハンドリング

イベントハンドリング例

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

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

@click="exampBtn(<?php echo $term->term_id; ?>, <?php echo $key; ?>)"

1	@click="exampBtn(<?php echo $term->term_id; ?>, <?php echo $key; ?>)"

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

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

WordPressの投稿を取得

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

<div id="Post" class="row">
  <div class="col-md-40 col-60" v-for="(post,index) in posts">
    <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.full.source_url">
  </div>
</div>

</div>

if (document.getElementById('Post')) {
  var postInstance = new Vue({

    el: "#Post",
    data() {
      return {
        posts: [],
        postsOrigin: [],
      };
    },

    methods: {
      btn(i){
        axios(BASEURL + 'posts?_embed&per_page=9&categories=' + this.postsOrigin[i] )
        .then( (res) =>{
          this.posts = res.data
        })
      },
    },

    mounted(){
      axios(BASEURL + 'posts?_embed&per_page=9')
      .then( (res) =>{
        this.posts = res.data
      })
    },

  });
}

if (document.getElementById('Post')) {

var postInstance = new Vue({

el: "#Post",

data() {

return {

posts: [],

postsOrigin: [],

};

methods: {

btn(i){

axios(BASEURL + 'posts?_embed&per_page=9&categories=' + this.postsOrigin[i] )

.then( (res) =>{

this.posts = res.data

})

mounted(){

axios(BASEURL + 'posts?_embed&per_page=9')

.then( (res) =>{

this.posts = res.data

})

});

}

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

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

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

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

今回の場合は下記
postInstance.postsOrigin

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

備考

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

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

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

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

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

YAS

2011年よりweb制作に従事。現在は主にWordpressによるサイト制作の他、DNS切替時や、サーバー移管時の各種トラブル解決を行っています。