Issue with accessing Vue.js parameter in route

Question

Issue with accessing Vue.js parameter in route

Trying to work with both VueJS and Laravel, I am currently facing an issue where I cannot retrieve a parameter value. Can anyone provide guidance on how to solve this problem?

This is my VueJS code:

getTestData:function () {
    let config = {
        params: {
            id: 1
        }
    };
    axios.post('{{ route('get_user_data') }}', config)
        .then(function (response) {
            console.log(response);
            // app.posts=response.data;
        })
        .catch(error => {

        })
    },

Here is my Controller code:

public function testData(Request $request)
{
    // Need help in retrieving this value
}

My route definition:

Route::post('get-user-data','TestController@testData')->name('get_user_data');

javascript ajax laravel vue.js

Answer 1

Answer №1

Instead of utilizing a post request to retrieve data from the database, consider using a get request which is more appropriate.

Make sure to include the parameter in the route definition:

Route::get('fetch-user-data/{id}','UserController@getUserData')->name('fetch_user_data');

//For a post request

Route::post('fetch-user-data/{id}','UserController@getUserData')->name('fetch_user_data');

In the controller method, extract the value from the request like this:

public function getUserData(Request $request)
{
    $id = $request->route('id');
}

Answer 2

Instead of utilizing a post request to retrieve data from the database, consider using a get request which is more appropriate.

Make sure to include the parameter in the route definition:

Route::get('fetch-user-data/{id}','UserController@getUserData')->name('fetch_user_data');

//For a post request

Route::post('fetch-user-data/{id}','UserController@getUserData')->name('fetch_user_data');

In the controller method, extract the value from the request like this:

public function getUserData(Request $request)
{
    $id = $request->route('id');
}

Answer 3

Answer №2

params refer to the URL parameters that will be included in the request

To access query string input in your controller, you can do so like this:

public function fetchData(Request $request)
{
    $name = $request->query('name');
}

Answer 4

params refer to the URL parameters that will be included in the request

To access query string input in your controller, you can do so like this:

public function fetchData(Request $request)
{
    $name = $request->query('name');
}

Issue with accessing Vue.js parameter in route

Answer №1

Answer №2

Similar questions

React/Javascript - Executing Function returns prematurely

Managing errors in jQuery.ajax() when it encounters a problem

Avoid reactivating focus when dismissing a pop-up menu triggered by hovering over it

Detecting attribute changes in AngularJS directivesGuide to detecting changes in attributes within Angular

Preventing Past Dates from Being Selected in JQuery Date Picker

Having difficulty retrieving information from Redux store

Encountering the error message "myFunction variable is not declared" when using Google Closure Compiler

Issue concerning the relative path of RequireJS optimizer

Create a line connecting two divs using jQuery's DOM manipulation capabilities

The presence of double quotes in stringified JSON is undesired

Retrieve the outcome of an AJAX request in JavaScript within a separate function

Asynchronous operations and recursive functions in the world of Node.js

Dealing with 'ECONNREFUSED' error in React using the Fetch API

When using Vuepress behind a Remote App Server, pages containing iframes may return a 404 error

What's the best way to animate the navigation on top of an image for movement?

Limiting the number of rows in pagination using a select option

Vue paginated select with dynamic data loading

How can I pass the current value of an HTML.DropDownListFor to an ActionLink?

Sending CSV files to users using MEANJS

ajax call not yielding any results