Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="container">
- <div class="row justify-content-center">
- <div class="col-md-8">
- <div class="card card-default">
- <div class="card-header">Example Component</div>
- <div class="card-body">
- <input type='text' v-model="car.name" />
- <input type='text' v-model="car.details" />
- <button class='btn btn-info' @click="create" >add</button>
- <table class="table table-bordered">
- <thead>
- <tr>
- <th>SL</th>
- <th>Firstname</th>
- <th>Lastname</th>
- <th>Create</th>
- <th>Update</th>
- <th>Action</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(car,index) in cars" :key="car.id">
- <td>{{index+1}}</td>
- <td>{{car.name}}</td>
- <td>{{car.details}}</td>
- <td>{{car.created_at}}</td>
- <td>{{car.updated_at}}</td>
- <td><a class='btn btn-info'>edit</a></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- mounted(){
- this.cardata()
- },
- data(){
- return{
- cars:[],
- car:{
- name:'',
- details:''
- }
- }
- },
- methods:{
- cardata(){
- axios.get('/api/tarek')
- .then((res)=>{
- this.cars=res.data
- })
- .catch((err)=>{
- console.log(err)
- })
- },
- create(){
- axios.post('/api/tarek', this.car)
- .then((res)=>{
- this.cars.unshift(res.data);
- this.car.name='';
- this.car.details='';
- })
- .catch((err)=>{
- console.log(err)
- })
- }
- }
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement