Vue 2.5 学习笔记 8.5 城市列表页数据改成AJAX获取

不念不忘少年蓝@ 2022-02-28 18:38 204阅读 0赞

没啥内容 就是把之前首页的数据获取重新做了一遍。直接上代码

1. 通过axios获取数据：

//City.vue
    <script>
    import axios from 'axios'
    import CityHeader from './components/Header'
    import CitySearch from './components/Search'
    import CityList from './components/List'
    import CityAlphabet from './components/Alphabet'
    export default {
      name: 'City',
      components: {
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
      },
      data () {
        return {
          cities: {},
          hotCities: []
        }
      },
      methods: {
        getCityInfo () {
          axios.get('/api/city.json')
            .then(this.handleGetCityInfoSucc)
        },
        handleGetCityInfoSucc (res) {
          res = res.data
          if (res.ret && res.data) {
            const data = res.data
            this.cities = data.cities
            this.hotCities = data.hotCities
          }
        }
      },
      mounted () {
        this.getCityInfo()
      }
    }
    </script>

2. 将数据传递给子组件：

//City.vue
    <template>
      <div>
        <city-header></city-header>
        <city-search></city-search>
        <city-list :cities = "cities" :hot = "hotCities"></city-list>
        <city-alphabet :cities="cities"></city-alphabet>
    
      </div>
    </template>

3.子组件获取数据后进行迭代显示到页面上

//CityList
    //只包括这篇讲的AJAX数据接收 不包括之前的那个better-scroll
    
    <script>
    export default {
      name: 'CityList',
      props: {
        hot: Array,
        cities: Object
      }
    }
    </script>
    <div class="area" v-for="(item, key) of cities" :key="key">
        <div class="title border-topbottom">{
       {key}}</div>
        <div class="item-list" v-for="innerItem of item" :key="innerItem.id">
            <div class="item border-bottom">{
       {innerItem.name}}</div>
    </div>

//CityAlphabet
    <template>
      <ul class="list">
        <li class="item" v-for="(item, key) of cities" :key="key">{
       {key}}</li>
      </ul>
    </template>
    
    <script>
    export default {
      name: 'CityAlphabet',
      props: {
        cities: Object
      }
    }
    </script>

没了 。 嗯。。搜索框 教程没讲 马丹