模拟数据应该是获取到了,但热门城市、城市列表无法渲染
来源:8-5 Vue项目城市选择页 - 页面的动态数据渲染
qq_慕神1532382
2020-09-29
老师 我的模拟数据可以打印出来,但是在页面上渲染不了热门城市和城市列表,请问是哪里出了问题呢
<template>
<div class="list" ref="wrapper">
<div>
<div class="area">
<div class="title border-topbottom">当前城市</div>
<div class="button-list">
<div class="button-wrapper">
<div class="button">北京</div>
</div>
</div>
</div>
<div class="area">
<div class="title border-topbottom">热门城市</div>
<div class="button-list">
<div class="button-wrapper"
v-for="item of hot"
:key="item.id"
>
<div class="button">{{item.name}}</div>
</div>
</div>
</div>
<div class="area" v-for="(item, key) of cities" :key="key">
<div class="title border-topbottom">{{key}}</div>
<div class="item-list">
<div class="item border-bottom"
v-for="innerItem of item"
:key="innerItem.id"
>
{{innerItem.name}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'CityList',
props: {
hot: Array,
cities: Object
},
mounted () {
this.scroll = new BScroll(this.$refs.wrapper)
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/variables.styl'
.border-topbottom
&::before
border-color: #ccc
&::after
border-color: #ccc
.border-bottom
&::before
border-color: #ccc
.list
overflow: hidden
position: absolute
top: 1.58rem
right: 0
bottom: 0
left: 0
.title
line-height: .54rem
background: #eee
padding-left: .2rem
color: #666
.button-list
overflow: hidden
padding: .1rem .6rem .1rem .1rem
.button-wrapper
float: left
width: 33.33%
.button
margin: .1rem
padding: .1rem 0
text-align: center
border: .02rem solid #ccc
border-radius: .06rem
.item-list
.item
line-height: .54rem
color: #666
padding-left: .2rem
</style>
写回答
1回答
-
同学你好,以你上面的描述及代码没法帮你找出问题来,建议你将City组件的代码也发上来,因为City组件和List是相关联的,我预测是传值问题。
1.你可以在城市列表组件中把从父组件接收的值打印出来,看看是否接收到从父组件传递过来值,如果没有接收到,就要查看一下你有没有做父组件向子组件传值的操作:
<CityList :cities="cities" :hot="hot"></CityList>
2.查看一下你在City组件中取值是否正确
032020-09-29
相似问题