创建分支:city-ajax
拉取到本地并切换分支:
git pull
git checkout city-ajax
然后在City.vue文件中发起axios请求:
import axios from 'axios' export default { data () { return { hotCity: [], cities: {} } }, created () { this.getCityList() }, methods: { getCityList () { axios.get('/api/city.json').then(this.getCityInfoSucc) }, getCityInfoSucc (res) { res = res.data console.log(res) if (res.ret && res.data) { this.hotCity = res.data.hotCities this.cities = res.data.cities } } } }
然后把根组件的数组传给子组件:
<city-list :hotCity="hotCity" :cities="cities"></city-list> <city-alphabet :cities="cities"></city-alphabet>
再到子组件List.vue中接收:
props: {
hotCity: Array,
cities: Object
},
开始定义热门城市和字母列表循环:
<div class="area"> <div class="title border-topbottom">热门城市</div> <div class="button-list"> <div class="button-wrapper" v-for="item in hotCity" :key="item.id"> <div class="button">{{item.name}}</div> </div> </div> </div> <div class="area" v-for="(item, key) in cities" :key="key"> <div class="title border-topbottom">{{key}}</div> <div class="item-list"> <div class="item border-bottom" v-for="v in item" :key="v.id">{{v.name}}</div> </div> </div>
因为cities是对象,所以循环要用键值key。
这时候刷新页面,已经可以看到数据渲染出来了。
然后需要渲染右侧的字母表列表,打开Alphabet.vue文件,编辑代码:
<template> <div class="list"> <ul> <li class="item" v-for="(item, key) in cities" :key="key">{{key}}</li> </ul> </div> </template> <script> export default { name: 'CityAlphabet', props: { cities: Object } } </script>
此时效果图:
提交代码并合并到master:
git add .
git commit -m "城市列表动态数据渲染"
git push
git checkout master
git merge city-ajax
git push