vue.js中怎么渲染多层嵌套的json数据

Question

看完vue.js文档没多久， 想用vue.js做一个小的demo，用的豆瓣的api，获取的json数据，有好几层。

js代码

actions: {
    // search the music
    get_music (context, object) {
      axios.get(API.searchMusic + object.name)
          .then((response) => {
            context.commit('getMusic', response.data.musics)
          })
    }
  }

vue组件

<div>
    <img :src="musics.image">
    <p>{{ musics.author }}</p>
</div>

图片获取到了，但是不知道怎么获取author下面的name，直接写autho的话会变显示成

[{name: 'XXX'}]

我是应该js上面修改呢， 还是该怎么写

Answer 1

既然是数组么，说明author可能不仅一个。那你就循环输出下呗。

<p>
    <span v-for="a in musics.author">
        {{ a.name }}
    </span>
</p>

Answer 2

<p>{{ musics.author[0].name }}</p>

Answer 3

我觉得是{{ musics.author[0].name}}。。。。，你把数据格式看清楚就好了。。。

Answer 4

推荐相学长的写法，使用v-for循环
楼下使用数组索引去获取author字段中name也是可行的，但是有个致命的问题，当数组为空时会抛出一个错误；
同样作者也不绝对就一个，从全面性来说，v-for，比用索引写死要好，也不存在抛出异常错误的担忧；
亲测 百试不爽！！！
顶我上去 让更多人知道