WordPress に Vue.js を スモールスタートで入れてみる その3

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その3
今回はACFオプションページのリピーターフィールドについて

ACF オプションページ リピーターフィールドの取得・出力

カスタムフィールドは、

• sample_field（繰り返しフィールド）
  • sample_field_title（テキスト）
  • sample_field_text（テキストエリア）

https://siteUrl.com/wp-json/acf/v3/options/options/ では

{
  "acf":{
    "sample_field":[
      {
        "sample_field_title":"title01-title01-title01",
        "sample_field_text":"text01-text01-text01"
      },
      {
        "sample_field_title":"title02-title02-title02",
        "sample_field_text":"text02-text02-text02"
      },
      // ...
    ]
  }
}

のようにAPIが吐かれる。そのうえで sampleField.vue（親） から sampleFieldBlock.vue（子） に props でオブジェクトを渡して、子コンポーネントで出力

sampleField.vue

<template>
  <sample-field-block:option="option">
  </sample-field-block>
</template>

<script>
import { API_OPTION_URL } from './../variable'
import axios from 'axios';
import SampleFieldBlock from './../component/sampleFieldBlock';

export default {
  components: {
    SampleFieldBlock
  },
  data() {
    return {
      option: {}
    }
  },
  mounted() {
    axios
      .get(`${API_OPTION_URL}`)
      .then((response) => {
        this.option = response.data.acf;
      })
  }
};
</script>

sampleFieldBlock.vue

<template>
  <section v-if="option.sample_field">
    <h1>Title</h1>
      <section v-for="(group,index) in option.sample_field" :key="index">
        <h2>{{group.sample_field_title}}</h2>
        <div>
          <p>{{group.sample_field_text}}</p>
        </div>
      </section>
  </section>
</template>

<script>
export default {
  props: {
    option: Object
  }
};
</script>