Vue.js

RPG character libary

Da vi begynde at lære at arbejde med vue fik vi til opgave at lave en side med vue components. Components er meget simplet en måde hvorpå at en sides ui kan opdeles i forskellige dele så de nemmere kan genbruges, et eksempel på dette kunne være header og footer sådan at du ikke behøver at genskrive den ind hver gang du lave en ny side.

Til opgaven valgte jeg at lave en form for bibliotek for alle de karakterer jeg har lavet til rollespil, både hoved og side karakterer, med evnen til at skifte mellem dem via header menuen

Måden dette blev sat op på var at hver knap samt side ikon har et id der bliver emittet til parent elementet og derfra bliver alle components der skal påvirkes givet et en v-if som kigger på hvilket id der er i indicator, og derved bliver components erstattet baseret på hvad der står i indicator sådan at alle components ikke står oven i hindanden.

routes

Senere blev der lavet en ny version af siden, hvor der blev gjort brug af routing til at organisere sidens indhold i app.vue filen.

Originalt var tanken at bruge export af data mellem siderne med export deafault og props men det vist sig ikke at fungerer, så derfor opbyggede jeg i stedet en api med en mongodb database som jeg fetcher data fra og placere ind på siden baseret på hvilken karakter der er blevet valgt

Dette betyder at det ikke er nødvendigt at have en side for hver karakter, da jeg har en enkel side hvor alt informationen kan sættes ind