如何删除Vuejs“范围未定义”警告？

Question

作为一个Vue.js的初学者，我有一个看起来像这样的组件：

<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”在传递给数据道具的对象中存在且正确。但是我怎样才能摆脱关于嵌套艺术家名称的警告呢？

[Vue warn]：计算表达式“data.artist.name”时出错：类型错误：scope.data.artist未定义（在组件中找到）：

埃塔：啊，对不起，是的，显示“数据”会有帮助：

{“id”：23182，“标题”：“来自‘可能的故事’的音乐”，“英国商店链接”：http://store.roughtraderecords.com/...html，“艺术家”：{“id”：1176，“姓名”：“贾维斯·科克”}

为了简洁起见，我去掉了一些字段，但希望这能证明data.artist.name确实存在。尽管有警告，但它肯定会成功输出到页面。

Answer 1

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