Vue (og Vuex) bug-knusende cheatsheet

Maximilian gir deg sine 3 beste tips til vanlige feil i Vue.js.

Denne guiden viser deg hvordan du retter opp tre vanlige feil i Vue.js. 📸: Ole Petter Baugerød Stokke
Denne guiden viser deg hvordan du retter opp tre vanlige feil i Vue.js. 📸: Ole Petter Baugerød StokkeVis mer

I det siste har jeg skrevet veldig mye Vue, og det skjer av og til at jeg gjentar de samme feilene om og om igjen.

Det tar meg 10-15 minutter for å finne ut av hvorfor det ikke fungerer, og feilene har ofte veldig defuse feilmeldinger.

Så jeg skrev denne artikkelen for å hjelpe deg – og meg selv!

#1: v-show på en template

Når du bruker v-show så endrer Vue CSS-egenskapen display.

En template-tag i Vue lager faktisk ikke noe element, så hvis du prøver å bruke v-show har ikke Vue noe element å endre CSS-verdien på.

Løsning:

Bruk v-if på en template-tag, eller endre template-tag-en til et element (div, section eller liknende).

Eksempel:

Vue (og Vuex) bug-knusende cheatsheet

#2: Hvorfor er ref-elementet undefined?

Mest sannsynlig så prøver du å hente ut et element som ikke blir tegnet opp.

Enten fordi det er nestet inni et element som har en v-if som evaluerer til false, eller at selve elementet har en v-if som evaluerer til false.

Ofte kan dette skje hvis du har et container-element med v-if=“loading”.

Løsning:

  1. Endre v-if til v-show
  2. Vent til v-if evaluerer til true

Eksempel:

Vue (og Vuex) bug-knusende cheatsheet

#3: Bruker du riktig property i Vuex sin state?

Når din Vue-applikasjon begynner å bli mer kompleks og du har ting som har like navn, samt kanskje mere nesting enn hva som er sunt, kan det være enkelt å bruke feil property.

Løsning:

  1. Bedre navngivning på variabler
  2. Prøv å unngå å neste med mindre det er nødvendig eller passer til situasjonen
  3. Sjekk om path-en til property-en er riktig

Eksempel:

I min web-app var Vuex-modulen kalt “user”. Så var det properties som loggedIn, token og så videre. Det var også en property som het “user”, som inneholdt den faktiske brukerdataen.

Da jeg importerte Vuex-modulen inni andre moduler, og jeg ville for eksempel få ut navnet, måtte jeg gjøre slik: user.state.user.name. Men det skjedde flere ganger at jeg bare skrev user.name.

De to property-navnene tok opp den samme mentale RAM-en i hodet mitt!