I'm having trouble figuring out what's going on with this code snippet – the value of the repository ref doesn't seem to be updating.
Even though I used async/await, it doesn't appear to be functioning correctly. The repository is just an empty array.
I am able to access the API outside of onMounted, so I suspect there might be something amiss with it. Unfortunately, I don't have much knowledge in this area.
Take a look at the code I've written:
<template>
<div>
<h1>Starred Repositories</h1>
<ul>
<li v-for="repository in repositories" :key="repository.id">
<h3>{{ repository.name }}</h3>
<p>{{ repository.description }}</p>
</li>
</ul>
<button @click="nextPage" :disabled="isLastPage">Next Page</button>
</div>
</template>
<script setup>
import { Octokit } from '@octokit/core';
const repositories = ref([]);
const page = ref("1")
const runtimeConfig = useRuntimeConfig();
const octokit = new Octokit({
auth: runtimeConfig.githubToken,
});
const nextPage = () => {
page.value++;
}
onMounted(async () => {
const response = await octokit.request('GET /user/starred?page=' + page.value, {
headers: {
'X-GitHub-Api-Version': '2022-11-28',
},
});
repositories.value = response.data;
})
console.log(repositories.value);
</script>
Additionally, here's my app.vue file:
<script>
import Star from './components/Star.vue'
export default {
components: {
Star,
}
}
</script>
<template>
<Star />
</template>