Home » vue » How to remove Vuejs "scope is undefined' warning?

How to remove Vuejs "scope is undefined' warning?

Posted by: admin November 26, 2021 Leave a comment

Questions:

As a beginner with Vue.js, I have a component that looks like this:

<template>
  <div>
    <a href="{{ data.uk_store_link }}">
      {{ data.title }} - {{ data.artist.name }}
    </a>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

“data.artist.name” is present and correct in the object that is passed to the data prop. But how can I get rid of the warning that pops up about the nested artist name?

[Vue warn]: Error when evaluating expression “data.artist.name”:
TypeError: scope.data.artist is undefined (found in component:
<release>)

ETA: Ah, sorry, yes, it would have been helpful to show the “data”:

{ “id”: 23182, “title”: “Music from ‘Likely Stories'”,
“uk_store_link”:
http://store.roughtraderecords.com/…html“,
“artist”: { “id”: 1176, “name”: “Jarvis Cocker” } }

I’ve stripped out some fields there for brevity, but hopefully this demonstrates that data.artist.name does actually exist. It certainly gets successfully output to the page, despite the warning.

Answers:
{{ data.artist ? data.artist.name : '' }}