%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<input type="text" v-model="search" placeholder="search box"/>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="user in filteredUsers" :key="user.id">
<th scope="row">{{user.id}}</th>
<td>{{user.lead_name}}</td>
<td>{{user.email}}</td>
<td v-if="user.status === '2'" style="background: red">{{user.status}}</td>
<td>{{user.location}}</td>
<td><button>Edit</button></td>
</tr>
</tbody>
<pagination :data="users" :limit="1" @pagination-change-page="getResults"></pagination>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data(){
return {
users:[],
search:'',
}
},
methods:{
loadusers(){
axios.get('/leads').then(({data})=> (this.users = data.data));
},
getPosts: function() {
axios.get('/leads').then(function(response){
this.rows = response.data;
}.bind(this));
}
},
created: function(){
this.loadusers()
},
computed:{
filteredUsers: function(){
return this.users.filter((user)=>{
return user.lead_name.toLowerCase().match(this.search.toLowerCase())||user.email.toLowerCase().match(this.search.toLowerCase())
||user.location.toLowerCase().match(this.search.toLowerCase()) ;
});
}
}
}
</script>
Zerion Mini Shell 1.0