jay_gorio
3 years ago
246
14
Laravel

How to display fetch values upon clicking a button using vue and laravel

Posted 3 years ago by jay_gorio

I have this project that when a user clicks on a button the data should be displayed on a table. However, I am using a table as seen here http://i.stack.imgur.com/HW4rE.jpg. What I want is that when a user clicks on the add button on the enrollment form table, it should displayed on the added subjects table without the need of refreshing the page. The problem is that I am using a table and I cannot make use of the v-model to bind the values.

So here's my form.blade.php

Enrollment Form table

<table class="table table-bordered">
  <tr>
    <th>Section</th>
    <th>Subject Code</th>
    <th>Descriptive Title</th>
    <th>Schedule</th>
    <th>No. of Units</th>
    <th>Room</th>
    <th>Action</th>
  </tr>
  <body>
    <input type="hidden" name="student_id" value="{{ $student_id }}">
    @foreach($subjects as $subject)
      @foreach($subject->sections as $section)
      <tr>
        <td>{{ $section->section_code }}</td>
        <td>{{ $subject->subject_code }}</td>
        <td>{{ $subject->subject_description }}</td>
        <td>{{ $section->pivot->schedule }}</td>
        <td>{{ $subject->units }}</td>
        <td>{{ $section->pivot->room_no }}</td>
        <td>
          <button 
              v-on:click="addSubject( {{ $section->pivot->id}}, {{ $student_id}} )" 
              class="btn btn-xs btn-primary">Add
          </button>

          <button class="btn btn-xs btn-info">Edit</button>
        </td>
      </tr>
      @endforeach
    @endforeach
  </body>
</table>

AddedSubjects Table

<table class="table table-bordered">     
    <tr>
      <th>Section Code</th>
      <th>Subject Code</th>
      <th>Descriptive Title</th>
      <th>Schedule</th>
      <th>No. of Units</th>
      <th>Room</th>
      <th>Action</th>
    </tr>
    
    <body>

    <tr v-for="reservation in reservations">
      <td>@{{ reservation.section.section_code }}</td>
      <td>@{{ reservation.subject.subject_code }}</td>
      <td>@{{ reservation.subject.subject_description }}</td>
      <td>@{{ reservation.schedule }}</td>
      <td>@{{ reservation.subject.units }}</td>
      <td>@{{ reservation.room_no }}</td>
      <td>
        <button class="btn btn-xs btn-danger">Delete</button>
      </td>
    </tr>

    </body>
</table>

And here's my all.js

new Vue({
el: '#app-layout',

data: {

    reservations: []

},
ready: function(){
    this.fetchSubjects();
},
methods:{

    fetchSubjects: function(){
        this.$http({
            url: 'http://localhost:8000/reservation',
            method: 'GET'
        }).then(function (reservations){
            this.$set('reservations', reservations.data);
            console.log('success');
        }, function (response){
            console.log('failed');
        });
    },

    addSubject: function(id,student_id){

        this.$http({
            url: 'http://localhost:8000/reservation',   
            data: { sectionSubjectId: id, studentId: student_id },
            method: 'POST'
        }).then(function(response) {                
            console.log(response);
        },function (response){
            console.log('failed');
        });
    }
  }
});

Can anyone suggets me on how to solve this problem, without the need of refreshing the page.

Please sign in or create an account to participate in this conversation.