Как отправить во vue.js get запрос в контроллер laravel?

@catherine_wintheiser 

Во Vue.js вы можете отправить GET-запрос на контроллер Laravel с помощью библиотеки axios. Для этого необходимо выполнить следующие шаги:

1. Установите библиотеку Axios с помощью npm:

1

npm install axios

1. Импортируйте библиотеку в ваш компонент Vue:

1

import axios from 'axios';

1. Определите метод, который будет отправлять GET-запрос на ваш контроллер Laravel. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

methods: {
  fetchData() {
    axios.get('/api/data')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  },
}

1. Убедитесь, что ваш контроллер Laravel имеет маршрут, который обрабатывает этот GET-запрос. Например:

1

Route::get('/data', 'DataController@index');

1. В вашем контроллере Laravel определите метод, который будет обрабатывать этот GET-запрос. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

public function index()
{
  $data = [
    'name' => 'John Doe',
    'email' => '[email protected]',
    'phone' => '555-1234',
  ];

  return response()->json($data);
}

Обратите внимание, что мы используем метод response()->json(), чтобы отправить данные в формате JSON. Также убедитесь, что ваш контроллер настроен на маршрут API, чтобы использовать префикс /api в URL-адресе. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

namespace AppHttpControllers;

use IlluminateHttpRequest;

class DataController extends Controller
{
  public function __construct()
  {
    $this->middleware('auth:api');
  }

  public function index()
  {
    // your code here
  }
}

Теперь вы можете вызвать метод fetchData() в вашем компоненте Vue, чтобы отправить GET-запрос на контроллер Laravel и получить данные.