Vue Js Composition Api undefined (reading 'name')

Question

I am having undefine (destination.name) when I am trying to use the Composition API but when I used the options API the code or computed property is working and I don't get any error. can someone help me? thanks

<template>
  <section class="destination">
    <h1>{{ destination.name }}</h1>
  </section>
</template>

<script setup>
/*
  import
*/
import { useRoute, useRouter } from "vue-router";
import { computed } from "vue";
import sourceData from "@/travel-data/data.json";

/*
  use params from vue-router
*/
const route = useRoute();
const router = useRouter();

const destinationId = computed(() => {
  return parseInt(route.params.id);
});

const destination = computed(() => {
  return sourceData.destinations.find(
    (destination) => destination.id === destinationId
  );
});
</script>

Error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
    at Proxy._sfc_render (DestinationView.vue:3:24)
    at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5580:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
    at instance.update (runtime-core.esm-bundler.js:5694:56)
    at setupRenderEffect (runtime-core.esm-bundler.js:5708:9)
    at mountComponent (runtime-core.esm-bundler.js:5490:9)
    at processComponent (runtime-core.esm-bundler.js:5448:17)
    at patch (runtime-core.esm-bundler.js:5038:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5660:17)

enter image description here

Boussadjra Brahim · Accepted Answer · 2022-08-08 07:41:00Z

1

Add a conditional rendering with v-if and access destinationId property with value field in the comparison :

<template>
  <section class="destination">
    <h1 v-if="destination">{{ destination.name }}</h1>
  </section>
</template>

<script setup>
/*
  import
*/
import { useRoute, useRouter } from "vue-router";
import { computed } from "vue";
import sourceData from "@/travel-data/data.json";

/*
  use params from vue-router
*/
const route = useRoute();
const router = useRouter();

const destinationId = computed(() => {
  return parseInt(route.params.id);
});

const destination = computed(() => {
  return sourceData.destinations.find(
    (destination) => destination.id === destinationId.value
  );
});
</script>

answered Aug 8, 2022 at 7:41

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Franz Schad Over a year ago

Thanks, and it worked when I added destinationId.value, and I didn't need to use v-if in the template (destination) => destination.id === destinationId.value

Amaarockz · Accepted Answer · 2022-08-08 07:43:09Z

1

Try doing this null check

<h1>{{ destination ? destination.name : '' }}</h1>

answered Aug 8, 2022 at 7:43

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

1 Comment

Franz Schad Over a year ago

Thanks for helping, It didn't show anything and there was no error in the console

Collectives™ on Stack Overflow

Vue Js Composition Api undefined (reading 'name')

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related