Запрос Ajax с Vuejs + Laravel отправляет только последнюю часть информации, которая была отправлена ​​на просмотр

Question

Мне нужна помощь в реализации базового запроса ajax через vue для моего laravel back-end, у меня есть логическое имя, завершенное на таблица, называемая курсами, и у меня есть представление, которое выбирает все курсы, назначенные конкретному пользователю, и позволяет им нажимать кнопку, чтобы изменить текущий статус курса, либо завершенный, либо нет, вот и все, вот и все, что я хочу сделать, прямо сейчас Я на полпути, я могу подать запрос ajax, но он только захватывает последний курс, который был подан в представление, я знаю, что это в конечном итоге окажется ошибкой с моей стороны, которую я не вижу, поэтому, пожалуйста, быть явным в вашем решении,

Соответствующая часть КурсовКонтроллер:

public function toggling($name) 
    { 
    $course = Course::where(['name' => $name])->first(); 

    $course->completed = !$course->completed; 
    $course->save(); 

    return response()->json(['course' => $course], 202); 
    } 

Экземпляр Вью, который расположен на главной странице макета (если это ошибка, пожалуйста, указать, что из):

<script> 
new Vue({ 
     el: '#app', 
     data: { 
     course: { 
      name: '' 
     } 
     }, 
     methods: { 
     onSubmit: function($course) { 
      this.course.name = '{{$course->name}}', 
      axios.post('/MyCourses/' + this.course.name); 
       // .then(function (response){ 
       // }); 
     } 
     } 
    }); 
</script> 

Форма часть зрения ответственного за предоставление курсов:

<tbody> 
    @foreach ($courses as $course) 
     <tr> 
     <td>{{ $course->name }}</td> 
     <td>{{ $course->appointment }}</td> 
     <td>{{ $course->room_id }}</td> 
     <td> 
      <form method="POST" action="{{ route('course.completed', $course->name) }}" id="form-submit"> 
       {{ csrf_field() }} 
        @if ($course->completed == true) 
        <button @click.prevent="onSubmit" type="button" class="btn btn-sm" id="coursetogglingtrue">Done!</button> 
        @else 
         <button @click.prevent="onSubmit" type="button" class="btn btn-sm" id="coursetogglingfalse">Not Yet!</button> 
        @endif 
      </form> 
     </td> 
    </tr> 
    @endforeach 
</tbody> 

Если у вас есть время, я был бы признателен, если вы можете помочь сделать эту динамику, привязав идентификатор div к соответствующему классу в зависимости от состояния курса, я не могу сделать это прямо сейчас, попробовал и не смог выполните условие if внутри Vue insta сть.

И это один маршрут отвечает за запрос от web.php:

Route::post('/MyCourses/{name}', 'CoursesController@toggling')->name('course.completed'); 

Прямо сейчас, скажем, у меня есть 4 курса на моей странице, если я нажал на любую кнопку, только последний курс будет предоставлен экземпляру vue, независимо от того, какую кнопку я нажал, я предполагаю, что, вероятно, структура моего представления - это то, что не так, я хотел бы знать, что вызывает проблему, также мои другие страницы ошибочны, потому что они не имеют доступа к объекту $ course, поэтому я предполагаю, что наличие всего этого в главном экземпляре Vue является большим нет-нет, еще раз, любые идеи/советы/рекомендации, которые вы имеете по проблеме или по мой код, пожалуйста, дайте мне знать, спасибо.

Answer 1

Во-первых, причина, по которой вы получаете только фамилию в своем экземпляре Vue, состоит в том, что вы жестко кодируете ее с помощью клинка. Когда вы используете цикл foreach, последняя итерация останется доступной в скрипте даже после завершения цикла (в этом случае последний $course в цикле).

this.course.name = '{{$course->name}}', //<-- There shouldn't be a comma here 

Если проверить HTML в консоли вы увидите имя будучи жёстко (помните, ваш PHP код будет оцениваться на сервере перед отправкой в ​​браузер). Причина, по которой она появляется, пока вы не нажмете на кнопку, состоит в том, что функция on submit не будет выполняться до тех пор.

На пути, чтобы обойти ваш вопрос будет передать переменную $course в onSubmit() т.е.

@click.prevent="onSubmit({{ $course }})" 

Тогда ваш метод onSubmit() будет:

onSubmit: function (course) { 
    axios.post('/MyCourses/' + course.name); 
    // .then(function (response) {}) 
} 

Вы также должны добавить csrf_field.Один простой способ сделать это было бы добавить следующее в вашем <script> выше new Vue:

window.axios.defaults.headers.common = { 
    'X-CSRF-TOKEN': '{{ csrf_token() }}', 
    'X-Requested-With': 'XMLHttpRequest' 
}; 

Для получения дополнительной информации вы можете найти этот учебник полезный: https://laracasts.com/series/learning-vue-step-by-step/episodes/10

Надеется, что это помогает!