vue父模块渲染子模块数据失效

如题,使用的是webpack打包工具,独立的card.vue模块是可以正常的渲染的。但我以父模块里引入的子模块的形式数据是无法正常的渲染,引入的涉及到循环部分的html都是空的。子模块是通过vue-resoure的ajax获取数据然后v-for循环。

PS:如果把ajax请求放在父模块,通过设置props方式传递数据也是可行的。不过,我想知道下,我直接引用是不行的么?或者要怎么更改呢?谢谢了~

示例:
父模块:

// html
<card-list></card-list>
// js
components: {
    'cardList': require('../views/card.vue')
}

子模块card.vue里的内容:

// html部分,其中infos是接口获取的数据
<div class="page-index" v-for="item in infos">
    <div class="content-block-title">{{ item.title }}</div>
    <div class="card demo-card-header-pic" v-for="list in item.subjects">
      <div valign="bottom" class="card-header color-white no-border no-padding">
        <img class='card-cover' v-for="img in list.casts" :src="img.avatars.medium" alt="img.name">
      </div>
    </div>
  </div>
// js
export default {
  data() {
      return {
          infos: []
      }
  },
  route: {
    data (transition) {
      this.$http.jsonp('/jsonp').then((response) => {
        this.infos=response;
      });
    }
  }
}
阅读 3.4k
2 个回答

问题在于数据都没传入子组件啊:

<card-list :infos="infos"></card-list>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题