0

我有这个项目，当用户单击按钮时，数据应显示在表格上。但是，我使用的是这里看到的表格http://i.stack.imgur.com/HW4rE.jpg。我想要的是，当用户单击注册表单表上的添加按钮时，它应该显示在添加的主题表上，而无需刷新页面。问题是我正在使用一个表，我不能使用 v-model 来绑定值。

所以这是我的 form.blade.php

报名表

<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>

添加主题表

<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>

这是我的 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');
        });
    }
  }
});

任何人都可以建议我如何解决这个问题，而无需刷新页面。

4

0 回答 0