Question

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

所以这里是我的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>

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>

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

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

   }
}

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

顺便说一句，我在console.log中有这个错误

Error when evaluating expression "reservation.section.section_code": TypeError: Cannot read property 'section_code' of undefined

Error when evaluating expression "reservation.subject.subject_code": TypeError: Cannot read property 'subject_code' of undefined

Error when evaluating expression "reservation.subject.subject_description": TypeError: Cannot read property     'subject_description' of undefined

Error when evaluating expression "reservation.subject.units": TypeError: Cannot read property 'units' of undefined

Answer 1

在从服务器获取数据后，您应该使用vue-devtools检查reservations内的实际数据。

因为错误消息只是意味着此数组中的对象没有.subject属性，这意味着您收到的数据可能没有您认为具有的结构，这就是您的解决方案将被发现。

我不太了解PHP或Laravel，但似乎您的GET请求从索引方法获得响应，并且此方法似乎回复了一系列主题，而不是一系列保留（应该是根据您的模板代码包含主题

使用vue js和laravel添加表数据时获取未定义的值

1 个答案: