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”存在并且在传递给数据prop的对象中是正确的。但是，如何摆脱弹出有关嵌套艺术家名称的警告？

[Vue警告]：评估表达式“data.artist.name”时出错： TypeError：scope.data.artist未定义（在组件中找到：＆LT;释放＆GT）

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

{“id”：23182，“title”：“来自'可能的故事'的音乐'， “uk_store_link”： “http://store.roughtraderecords.com/...html”， “艺术家”：{“id”：1176，“name”：“Jarvis Cocker”}}

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

Answer 1

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

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

1 个答案: