VueとWP REST API でサムネイル付き一覧を作成＆取得時に発生する再現性のないバグを回避する方法

WordpressとVueを組み合わせて一覧を作成していた際のコードサンプルと、
再現性のないバグ？っぽい挙動があり、情報がどこにもなかったためまとめます。

###バグの解決をしたいだけの人用まとめ
結論：投稿消して、新規投稿、かつサムネイルも新規アップロードしたら直るよ！



##背景
WP REST APIを利用し、Wordpress外でVueを使ってお知らせ一覧を表示するということを行っていました。
サムネイル付きのデータが欲しい場合、取得urlの末尾に?_embedをつけると、
戻り値の中に_embeddedが追加され、その中にあるsource_urlから取得できます。
以下戻り値の取得例。

```javascript
//戻り値がdataに格納されている上で
thumbUrl = data[0]["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["thumbnail"]["source_url"];
```

["thumbnail"]を["lage"]などに変えればサイズを変えて取得も可能。

WP REST APIとVueでのサムネイル付き一覧作成するサンプルソースを掲載します。

###VueとWP REST API でサムネイル付き一覧を作成するサンプル

```vue
<template>
  <div>
    <div v-for="item in slicedItems" :key="item.id">
        <a :href="item.link">
          <div class="img_box">
            <span v-if="item.thumbnail"><img :src="item.thumbnail" alt="item.title.rendered" /></span>
            <span v-else><img :src="noImage" alt="no image" /></span>
          </div>
          <div class="txt_box">
            <p class="date">{{ dateConv(item.date) }}</p>
            <h3>{{ item.title.rendered }}</h3>
            <div>{{ strReplace(item.excerpt.rendered) }}</div>
          </div>
        </a>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [],
    };
  },
  props: {
    //urlに渡している内容はこれ。投稿をサムネ付きで４つ取得している。
    //https://mydemosite.com/info/wp-json/wp/v2/posts?_embed&per_page=4
    url: String,
    count: {
      type:String,
      default:"4",
    },
    noImage: {
      type:String,
      default:"/assets/img/common/no_image.png",
    },
  },
  methods: {
    getPosts() {
      this.isLoading = true;
      var self = this;
      axios
        .get(this.url)
        // Success
        .then((response) => {
          if (response.status != 200) {
            //console.log(response.statusText);
            exit;
          }
          self.items = response.data;
          //サムネイルの取得とデータ格納
          for(let i = 0; i < self.items.length; i++) {
            if(response.data[i]["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["thumbnail"]["source_url"]){
              self.items[i].thumbnail = response.data[i]["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["thumbnail"]["source_url"];
            }
          }
        })
        // Error
        .catch((error) => {
          console.log(error);
          this.isLoading = false;
        });
    },
    dateConv(data){
      var newdate = new Date(data);
      var year = newdate.getFullYear();
      var month = newdate.getMonth() + 1;
      var day = newdate.getDate();
      return year + '年' + month + '月' + day + '日';
    },
    strReplace(data){//…[&hellip;]
      var replaced = data.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');
      replaced = replaced.replace(/ \[&hellip;\]/g,'…');
      return replaced;
    },
  },
  created() {
    this.getPosts();
  },
};
</script>
```
だいたいこんな感じで取得していました。


###WordPressでいろいろいじっていたら突然サムネイルが取れなくなる
取得できたのを確認したあと、Wordpressで投稿のカテゴリを増やす、
また特定の記事でサムネイル画像を変更するなどしていました。

その後、一覧を取得していたページに戻ったところ、
触った記事だけでなく、全記事のサムネイル画像が表示されなくなっていました。

そこでconsoleにログを取得して確認していたところ、
wp:featuredmediaから先が正しく取れていないことがわかりました。
その中のデータを確認すると以下のようなエラーが返ってきています。

```console
code: "rest_forbidden"
data:status: 401
message:"その操作を実行する権限がありません。"
```

そもそも権限にからむ操作をした記憶もなく、ソース自体変わっていなかったため原因が不明でした。

###解決方法
国内外問わずググってもこれという情報がでず・・・
WP APIのissueで同様の質問を発見。
解答を見ていると、
「これ多分バグっぽくて、投稿消して再度投稿したら行けるよ」って書いてました。

なので、言われた通り、
**投稿消して、新規投稿、かつサムネイルも新規アップロード（←重要）**したら直りました。

日本語ファイルが原因だったのか、特殊文字が原因だったのか（サンプル①.jpgみたいな名前）、
再度試したけど再現せず、サンプル①.jpgみたいな名前の画像でもしっかりと表示され、
原因自体は不明でした。

とにかく、このような現象にあった場合は、再投稿するほかないようです。


参考　[https://github.com/WP-API/WP-API/issues/2596](https://github.com/WP-API/WP-API/issues/2596)