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


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

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

export default {
  props: ['data']

“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:

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

{ “id”: 23182, “title”: “Music from ‘Likely Stories'”,
“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.

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