VUE數據綁定之axios數據請求

<template>

            <div class="wl_venue_left">
                <ul>
                    <li v-for="(item, index) in venue" :key="item.index">
                        <a href="">
                            {{item.index}}
                            <div class="wl_venue_img"><img :src="item.img" alt=""><span>{{index+1}}</span></div>
                            <div class="wl_venue_txt">
                                <h2>{{item.name}}</h2>
                                <p>{{item.address}}</p>
                            </div>
                        </a>
                    </li>

                </ul>
                <Pages></Pages>
            </div>
</template>

<script>

export default {
  name: 'index',
  data () {
    return {
        venue:[]
    }
  },
   beforeCreate:function(){
   this.$ajax.get('http://localhost:8080/getdata')
    .then( (response) => {
    //     var datajson=[
    //   {id:'1',img: "the very first post", address: "1test dimpsum", name: "lorem1"},
    //   {id:'2',img: "and then there was the second", address: "2test dimsum",name: "lorem2"},
    //   {id:'3',img: "third time's a charm", address: "3test dimsum",name: "lorem3"},
    //   {id:'4',img: "four the last time", address: "4test dimsum",name: "lorem4"}
    // ]
    // 傳入的json格式示例如上
    // const list = Object.keys(json).map((item, index) => ({key: item, value:json[item]}
        this.venue=response.data
        // this.venue.push(response.data)
        console.log(this.venue)
    })
    .catch(function (error) {
        console.log(error);
    });
  },
  mounted:function(){
      console.log(this.venue)
  },
  components: {
    'MySearch': MySearch
  }
}
</script>

<style scoped lang="scss">
</style>

import axios from 'axios'
Vue.prototype.$ajax = axios