vue.js搭建使用者管理系統練手（三）----http請求列表資料

上一節我們在vue.js引入bootstrap的基本框架，這節我們順便顯示列表資料：

改造Customer.vue:

<template>
  <div class="customers container">
  <h1 class="page-header">使用者管理系統</h1>
  <table class="table table-striped">
    <thead>
        <tr>
            <th>姓名</th>
            <th>電話</th>
            <th>郵箱</th>
            <th></th>
        </tr>
    </thead>
     <tbody>
        <tr v-for="customer in customers">
            <td>{{customer.name}}</td>
            <td>{{customer.phone}}</td>
            <td>{{customer.email}}</td>
            <td></td>
        </tr>
     </tbody>
  </table>

  </div>
</template>

<script>
export default { 
  name: 'customers',
  data () {
    return {
        customers:[]
    }
  },
  methods:{
    fetchCustomers(){
        this.$http.get("http://localhost:3000/users")
            .then(function(response){
               //console.log(response);
               this.customers = response.body;
            })
    }
  },
    created(){
        this.fetchCustomers();
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

• 在例項被建立的時候就呼叫fetchCustomers方法獲取資料放入到customers 中
• 引入bootstrap的container樣式，通過v-for指令將獲取到的json陣列資料迴圈顯示

ps;如果沒有註冊 vue-resource ，需要通過npm install vue-resource –save命令來註冊該外掛，該外掛用於http請求獲取資料！