updated lists index to use typescript and composition api
This commit is contained in:
parent
e335601ab8
commit
d339424e7a
3 changed files with 34 additions and 29 deletions
9
.idea/workspace.xml
generated
9
.idea/workspace.xml
generated
|
@ -6,11 +6,7 @@
|
|||
<component name="ChangeListManager">
|
||||
<list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/nuxt.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/nuxt.config.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/package-lock.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/package.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/pages/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/index.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/tsconfig.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/index.vue" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
|
@ -25,6 +21,7 @@
|
|||
<list>
|
||||
<option value="CSS File" />
|
||||
<option value="Vue Single File Component" />
|
||||
<option value="TypeScript File" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
|
@ -130,7 +127,7 @@
|
|||
<workItem from="1673397538637" duration="47416000" />
|
||||
<workItem from="1673508732689" duration="1316000" />
|
||||
<workItem from="1673547794038" duration="2346000" />
|
||||
<workItem from="1743904898331" duration="4240000" />
|
||||
<workItem from="1743904898331" duration="10658000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
|
|
|
@ -13,30 +13,32 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index",
|
||||
data: () => ({
|
||||
lists: [],
|
||||
}),
|
||||
methods: {
|
||||
getLists: function () {
|
||||
<script lang="ts" setup>
|
||||
import type { MovieList } from "~/types/movielist";
|
||||
|
||||
const lists = defineModel<MovieList[]>("movie_list", { default: [] });
|
||||
const updateLists = async function () {
|
||||
let config = useRuntimeConfig();
|
||||
fetch(`${config.public.apiURL}/lists`, {
|
||||
const { data, status, error } = await useFetch<MovieList[]>(
|
||||
`${config.public.apiURL}/lists`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {"Content-type": "application/json"}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(json => this.lists = json)
|
||||
.catch(err => console.log(err))
|
||||
headers: { "Content-type": "application/json" },
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getLists()
|
||||
);
|
||||
|
||||
if (error) {
|
||||
if (error.value?.statusCode === 401) {
|
||||
console.log("unauthorized");
|
||||
}
|
||||
}
|
||||
} else {
|
||||
lists.value = data.value || [];
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
updateLists();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
6
src/types/movielist.ts
Normal file
6
src/types/movielist.ts
Normal file
|
@ -0,0 +1,6 @@
|
|||
export type MovieList = {
|
||||
id: number;
|
||||
name: string;
|
||||
public: boolean;
|
||||
movie_count: number;
|
||||
};
|
Loading…
Add table
Reference in a new issue