Getting undefined values when adding a table data using vue js

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(section,subject,student_id){
        var self = this;
        this.$http({
            url: 'http://localhost:8000/reservation',   
            data: { sectionSubjectId: section.pivot.id, studentId: student_id },
            method: 'POST'
        }).then(function(response) {
            self.$set('reservations', response.data);   
            console.log(response);
            self.reservations.push(response.data);
        },function (response){
            console.log('failed');
        });
    }
  }
});

Here's my ReservationController

class ReservationController extends Controller
{

public function index()
{
    $student = Student::with(['sectionSubjects','sectionSubjects.section', 'sectionSubjects.subject'])->find(1);

    return $student->sectionSubjects;    
     
}

public function create($id)
{
    $student_id = $id;

    $subjects = Subject::with('sections')->get();
 
    return view('reservation.form',compact('subjects','student_id'));
}

public function store(Request $request)
{
    
    $subject = SectionSubject::findOrFail($request->sectionSubjectId);

    $student = Student::with(['sectionSubjects','sectionSubjects.section', 'sectionSubjects.subject'])->findOrFail($request->studentId);

    $subject->assignStudents($student);

    return $student->sectionSubjects;

   }
}

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.