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

【问题标题】：How to remove Vuejs "scope is undefined' warning?如何删除 Vuejs“范围未定义”警告？
【发布时间】：2016-08-11 13:06:21
【问题描述】：

作为 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 警告]：评估表达式“data.artist.name”时出错： TypeError：scope.data.artist 未定义（在组件中找到： )

ETA：啊，抱歉，是的，显示“数据”会很有帮助：

{ "id": 23182, "title": "来自 'Likely Stories' 的音乐", “英国商店链接”： "http://store.roughtraderecords.com/...html", “艺术家”：{“id”：1176，“名称”：“贾维斯考克”}}

为了简洁起见，我已经删除了那里的一些字段，但希望这表明 data.artist.name 确实存在。尽管有警告，但它肯定会成功输出到页面。

【问题讨论】：

如果可能，请分享完整的data ？
可能是因为 data.artist 不存在。当您使用父组件中的组件时，您需要将数据属性绑定到像这样的数据，并且该专辑看起来像 { title: 'my world' ，艺术家：{名称：“贾斯汀·比伯”} }
我已将数据作为输出添加到 {{ data | json}}。我不认为 data.artist.name 不存在。

标签： vue.js

【解决方案1】：

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

【讨论】：

D'oh，你说得对，就是这么简单。我很困惑，因为每个“数据”确实都有一个 data.artist，但我想在确定之前有一个时间点，会发出警告......