Первая итерация моего веб-приложения с Laravel Spark использовала стандартную функциональность блейда для ввода и отображения данных. В Larvel это так просто, однако для выполнения отправки и отображения обновлений, как и для большинства (всех?) php-приложений, требовалось обновление страницы. Я знаю, что всякий раз, когда я использую веб-приложение, выполняющее полное обновление страницы, я немного разочаровываюсь.

К счастью, Spark поставляется с Vue.js — Vue.js — это быстрый и легкий JavaScript-фреймворк, который, как и laravel, хорошо документирован и прост в использовании — особенно с учетом того, что Джеффри Уэй дает много уроков по Laracasts. Используя Laravel для создания API, становится довольно легко выполнять нужные мне действия, используя возможности AJAX Vue.

Моя задача и возможность обучения заключались в том, чтобы:

  • Отправьте и сохраните заполненную форму
  • Запустите модальную форму с некоторыми из только что отправленных элементов данных
  • Если конкретный рабочий процесс выбран из вариантов, представленных в модальном окне, вернитесь на страницу, чтобы ввести следующую запись и показать полный список состояний всех активных записей.

Файл Vue

Чтобы выполнить все три требования, я провел несколько часов, играя с Методами — пытаясь отфильтровать и перезагрузить и т. д. Я смог заставить первые два элемента с маркированными списками работать нормально — ключом ко всем трем было извлечение свойств из объекта данных Vue в функция вне компонента Vue, а затем вызов функции при создании страницы и после любых событий, управляемых пользователем — нашел это решение благодаря Stackoverflow и Линусу Боргу

function initialState() {
return {
…
}
}

Затем извлеките свойства объекта данных, вызвав функцию

Vue.component('home', {
props: ['user'],

data: function() {
return initialState();
},

Во время первоначальной загрузки страницы

created() {
this.getAdrList();
this.getAssignUser();
},

и последующие пользовательские события

Это определенно обучающее путешествие, поэтому любые альтернативные подходы или рекомендации приветствуются.

ПРИМЕЧАНИЕ. Хотя можно создать SPA с помощью Vue без Laravel, я предпочитаю функции маршрутизации, контроллера и доступа к данным, предоставляемые Laravel — возможно, когда я лучше разберусь во всех компонентах, я рискну просто использовать Vue для проекта