xinggevip

Vue2.x Cli3.x 路由的一些细节
Home.vue <tbody> <tr v-for="custome...
扫描右侧二维码阅读全文
07
2019/06

Vue2.x Cli3.x 路由的一些细节

Home.vue

 <tbody>
        <tr v-for="customer in customers" :key="customer.value">
          <td>{{customer.name}}</td>
          <td>{{customer.phone}}</td>
          <td>{{customer.email}}</td>
          <td><router-link class="btn btn-default" v-bind:to="'/customer/' + customer.id">详情</router-link></td>
        </tr>
      </tbody>

CustomerDetails.vue

<template>
  <div class="customerdetails container">
    <h1>This is an customerdetails page</h1>
  </div>
</template>

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

<style>

</style>
Last modification:June 7th, 2019 at 09:30 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment