How to remove Vuejs "scope is undefined' warning?

Question

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.

its probably because data.artist doesnt exist. when you use the component in the parent you need to bind your data property to a piece of data like <my-component :data="album"></my-component> and that album looks like { title: 'my world', artist: { name: 'justin bieber' } } — vbranden
– vbranden, Commented Aug 11, 2016 at 14:30
I've added the data as output in a {{ data | json }}. It's not that data.artist.name doesn't exist, I don't think. — thesunneversets
– thesunneversets, Commented Aug 11, 2016 at 14:58

gurghet · Accepted Answer · 2016-08-11 13:10:41Z

2

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

answered Aug 11, 2016 at 13:10

gurghet

7,6865 gold badges40 silver badges66 bronze badges

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

1 Comment

thesunneversets Over a year ago

D'oh, you're right, it really is as simple as that. I was confused because every "data" did have a data.artist, but I guess there's a point in time before that's been established, where the warning gets given...

Collectives™ on Stack Overflow

How to remove Vuejs "scope is undefined' warning?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related