How to display specific employee details in next page(same tab)from employee table in Vue_js?
Here is my code which will display employee detail in table which is fetch from api. EmployeList.vue
<template>
<div>
<h1>Employee List</h1>
<table border ="1px" id="tableData">
<tr>
<td>Name</td>
<td>Salary</td>
<td>Age</td>
</tr>
<tr v-for="item in list" v-bind:key="item.id">
<td><NuxtLink type="primary" to="/EmployeeOne">{{item.employee_name}}</NuxtLink></td>
<td>{{item.employee_salary}}</td>
<td>{{item.employee_age}}</td>
</tr>
</table>
<nuxt />
<EmployeeOne :EmployeDetail="list"></EmployeeOne>
</div>
</template>
<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import EmployeeOne from '../pages/EmployeeOne.vue'
Vue.use(axios,VueAxios)
export default
{
components: {EmployeeOne},
name:'EmployeList',
props: [''],
data()
{
return{list: undefined,}
},
mounted()
{
axios.get('http://dummy.restapiexample.com/api/v1/employees').then((resp)=>
{
this.list = resp.data.data;
console.warn(resp.data.data)
})
},
methods:
{
myFunction()
{
}
}
}
</script>
<style scoped>
</style>
Here I created new page EmployeOne.vue
<template>
<div>
<p>Tiger Nixon</p>
<p>320800</p>
<p>61</p>
<!-- {{EmployeDetail}} -->
</div>
</template>
<script>
export default {
name:'EmployeeOne',
components: {},
props: ['EmployeDetail']
}
</script>
<style scoped>
</style>
which contain one employee details which is link to above EmployeList.vue file when I click on first employee details it will display his details only in next page(same tab). My question is how to do this for every employee in that list dynamically?
