Notion に登録された英単語を出題する Web アプリを AWS、Vue.js を用いて作成する

https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
                                  |--------- Database ID --------|

import json
import query_item

def lambda_handler(event, context):
    items = query_item.query_item()

    return {
        'statusCode' : 200,
        'body' : json.dumps(items),
        'headers': {
            'Access-Control-Allow-Headers': '*',
            'Access-Control-Allow-Origin': 'http://{S3バケット名}.s3-website-ap-northeast-1.amazonaws.com',
            'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
        }
    }

import boto3
from notion_client import Client

#SSM
ssm = boto3.client('ssm')
notion_token: str = ssm.get_parameter(Name='/linebot/vocabulary/notion_token',WithDecryption=True)['Parameter']['Value']
database_id: str = ssm.get_parameter(Name='/linebot/vocabulary/database_id',WithDecryption=True)['Parameter']['Value']

notion = Client(auth=notion_token)


def parse_item(items, res):
    for result in res['results']:
        try:
            item = {}
            item['Word'] = result['properties']['Word']['title'][0]['plain_text']
            item['Japanese'] = result['properties']['Japanese']['rich_text'][0]['plain_text']
            items.append(item)
        except IndexError:
            pass
    return items

def query_item(items=[], cnt=0, next_cursor=None):
    print(f'cnt:{cnt}, next_cursor:{next_cursor}')
    param = {"database_id" : database_id} if cnt == 0 else {"database_id" : database_id, "start_cursor" : next_cursor}
    res = notion.databases.query(**param)
    items = parse_item(items, res)
    has_more = res['has_more']
    next_cursor = res['next_cursor']
    if has_more:
        cnt += 1
        return query_item(items, cnt, next_cursor)
    return items

if __name__ == '__main__':
    query_item()

<script setup>
import { ref, reactive } from 'vue';

const data = ref(0);
const index = ref(0);
const isStarted = ref(false);
const isAnswered = ref(false);

const url = '{API Gateway のエンドポイント}';

async function resJson () {
  const res = await window.fetch(url);
  const res_data = await res.json();
  data.value = res_data;
  console.log(data);
}

resJson();

const shuffle = ([...array]) => {
  for (let i = array.length - 1; i >= 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

const previousButton = () => {
  isAnswered.value = false;
  index.value -= 1;
};

const nextButton = () => {
  isAnswered.value = false;
  index.value += 1;
};

const answerButton = () => {
  isAnswered.value = true;
};
</script>

<template>
  <v-btn block @click="isStarted=true" v-show="!isStarted" >開始</v-btn><br><br>
  <v-btn @click="data=shuffle(data)" v-show="!isStarted" >シャッフル</v-btn>

  <div v-if="isStarted">
    <v-btn @click="previousButton()" v-bind:disabled="!index" >前の問題</v-btn>
    <v-btn @click="nextButton()" v-if="isAnswered" >次の問題</v-btn>
    <v-btn @click="answerButton()" v-else >答え</v-btn>
    <br><br>
    <p>{{ data[index].Word }}</p><br>
    <p v-show="isAnswered">{{ data[index].Japanese }}</p>
  </div>

</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>