I am working with an API that provides a JSON response structured like this:
{
"Thriller": "Thriller books",
"Biographical": "Biographical books",
"Romance": "Romance books"
}
My goal is to create routes that look like this:
http://example.com/thriller
http://example.com/biographical
http://example.com/romance
The API will determine the types of books available to view, and then a component called Books will display general information about each book type. I have made progress with my router setup:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Books from './views/Books.vue';
Vue.use(Router);
var books: Record<string, string> = await fetch('http://example.com/api/available-books')
.then((response) => response.json())
.then((data) => {
return data;
});
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: books.map((shortname: string, fullname: string) => ({ component: Books, path: `/${shortname}` })),
});
However, the TypeScript linter is flagging two issues with the map() function: TS1005: comma expected at the end of the line and
TS2349: Cannot invoke an expression - type String has no invocation signature