google 스프레드시트 데이터를 json으로 내보내 NUXT에서 섹션별로 나열

스프레드시트의 데이터를 검색하여 섹션별로 데이터를 나열한 것을 잊지 않도록 주의하십시오.
axios로 GET 해 오면 늦었기 때문에 개선하고 싶다.

스프레드시트에 표 준비





데이터를 json 형식으로 출력.



방법은 여기를 참고.
htps : // 코 m / 유키 이치카 /

NUXT측에서 데이터를 취득한다.



여기를 참고.
htps : /// ゔぇり cks. 코 m / 누 xt 아오 s /

vue 파일 내에서
export default {
  async asyncData({ $axios }) {
    const url = 'https://script.google.com/macros/s/ID/exec';
    // リクエスト(Get)
    const response = await $axios.$get(url);
    // 配列で返ってくるのでJSONにして返却
    return { result: response }
  }
};
</script>

섹션별로 나열



이를 위해 sectionsKey를 설정하십시오.
<ul>
  <template v-for="item in result">
    <template v-if="item.sectionsKey === 1">
      <li>
        <nuxt-link :to="item.url">{{ item.pages }}</nuxt-link>
      </li>
    </template>
  </template>
</ul>

좋은 웹페이지 즐겨찾기