Foutmeldingen

Een foutmelding lezen

Een foutmelding is geen straf, maar een hint. De computer vertelt je wat er mis is, en vaak ook waar.

Waar zie je de foutmelding?

• Browser: F12 → tabje Console. Vue-meldingen beginnen met [Vue warn]
• Vite: een rood scherm over je pagina, of de terminal waar npm run dev draait

Zo pak je het aan

1. Lees de eerste rode regel. Die zegt wat er mis is
2. Zoek de bestandsnaam en het regelnummer, bijv. App.jsx:12. Daar zit de fout (of net een regel erboven)
3. Zoek je foutmelding hieronder op

accessed during render but is not defined

[Vue warn]: Property "count" was accessed during render but is not defined on instance.

Wat betekent het? Je gebruikt count in je template, maar Vue kent hem niet.

• Je bent vergeten hem te maken in <script setup>
• Typfout: count in de template, counter in het script

<script setup>
import { ref } from "vue";
</script>

<template>
  <p>{{ count }}</p>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

<template>
  <p>{{ count }}</p>
</template>

Failed to resolve component

[Vue warn]: Failed to resolve component: Navbar

Wat betekent het? Je gebruikt <Navbar /> in je template, maar je hebt hem niet geïmporteerd.

<script setup>
</script>

<template>
  <Navbar />
</template>

<script setup>
import Navbar from "./components/Navbar.vue";
</script>

<template>
  <Navbar />
</template>

Vergeten .value

TypeError: Assignment to constant variable.

Wat betekent het? In het <script> moet je bij een ref altijd .value gebruiken. In de <template> juist niet. Vergeet je .value, dan krijg je deze fout, of je ziet ineens [object Object]1 op je scherm.

const count = ref(0);

const verhoog = () => {
  count = count + 1;
};

const count = ref(0);

const verhoog = () => {
  count.value = count.value + 1;
};

Cannot read properties of undefined

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Wat betekent het? Je template gebruikt data die nog niet geladen is. De eerste keer dat Vue rendert, is je fetch nog bezig.

const user = ref();

<template>
  <h1>{{ user.name }}</h1>
</template>

const user = ref(null);

<template>
  <h1 v-if="user">{{ user.name }}</h1>
  <p v-else>Laden...</p>
</template>

Voor lijsten: begin met een lege array, ref([]). Dan werkt v-for meteen.

target is readonly

[Vue warn]: Set operation on key "title" failed: target is readonly.

Wat betekent het? Je probeert een prop aan te passen. Props zijn alleen-lezen: de parent is de baas over die data.

const props = defineProps(["title"]);

props.title = "Nieuwe titel";

const props = defineProps(["title"]);
const emit = defineEmits(["update-title"]);

// Vraag de parent om het aan te passen
emit("update-title", "Nieuwe titel");

Failed to resolve import

Failed to resolve import "./components/Card.vue" from "src/App.vue". Does the file exist?

Wat betekent het? Vite kan het bestand niet vinden.

• Pad fout? ./ = dezelfde map, ../ = een map omhoog. @/ = de src-map
• Hoofdletters? card.vue en Card.vue zijn verschillend
• .vue vergeten? Bij Vue-bestanden moet de extensie erachter

No match found for location

[Vue Router warn]: No match found for location with path "/producten"

Wat betekent het? Er bestaat geen route voor deze URL.

Check in src/router/index.js of de route bestaat, en of de spelling hetzelfde is als in je <RouterLink>:

const routes = [
  { path: "/", component: HomeView },
  { path: "/producten", component: ProductenView },
];

inject() can only be used inside setup()

inject() can only be used inside setup() or functional components.

Wat betekent het? Je roept useRouter(), useRoute() of een store aan binnen een functie. Dat moet bovenaan in je <script setup>.

const ga = () => {
  const router = useRouter();
  router.push("/home");
};

const router = useRouter(); // bovenaan

const ga = () => {
  router.push("/home");
};

no active Pinia

"getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

Wat betekent het? Je gebruikt een Pinia store, maar Pinia is niet aangezet in je app.

// main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

const app = createApp(App);
app.use(createPinia());
app.mount("#app");

expect to have 'v-bind:key'

Elements in iteration expect to have 'v-bind:key' directives.

Wat betekent het? Bij v-for moet elk element een unieke :key hebben, zodat Vue weet welk item welk is. Deze melding zie je in VS Code (rode lijn).

<li v-for="todo in todos">{{ todo.title }}</li>

<li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>