Using Vue Axios to load a Laravel view can be a seamless process that

I'm attempting to create a hyperlink to a Laravel view named faq.blade.php from my Vue component. I've tried using axios, and even though it logs the response in the console, the view isn't loading. How can I resolve this issue?

FaqController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FAQController extends Controller
{
    public function index(){
        return view('main.faq');
    }
}

I'm trying to access it from this component: Main.vue (located in the '/' route)

    <b-list-group-item align="left" @click="faq"><strong>></strong> FAQ</b-list-group-item>
    <b-list-group-item align="left" @click="services"><strong>></strong> Services</b-list-group-item>


<script>
export default {
    methods: {
        faq() {
        axios.get('/faq')

            .then(res => {
                console.log("faq");
            })
        },
        services(){
        axios.get('/services')

            .then(res => {
                console.log("services");
            })
        }
    }
}
</script>

Routes: web.php

Route::get('/', function () {
    return view('main.landing');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::get('/faq', 'FAQController@index')->name('faq');
Route::get('/services', 'ServicesController@index')->name('services');

Answer №1

When making an Axios call, the response will contain a block of HTML as a string. However, if you want to display this HTML content in the browser without reloading the page, it's best to redirect to the corresponding route.

export default {
    methods: {
        faq() {
            window.location = "/faq";
        },
        services() {
            window.location = "/services";
        }
    }
};

If you prefer the page not to reload (which may be why you're using axios), consider using TurboLinks or setting up a Single Page Application (SPA) with VueRouter to load the view as a component.

I hope this explanation helps!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There seems to be an issue with posting JSON data correctly

Currently, I am attempting to include an object with numerous attributes within it. This is the object I am trying to use with $.post: ({"fname" : fname, "lname" : lname, "gender" : gender, "traits" : { "iq" : inte ...

When a child is added to a parent in Angular UI Tree, it automatically appears in all parent nodes as well

I've been experimenting with the drag and drop feature of Angular UI Tree, and I've encountered a puzzling issue. The JSON data is fetched from my services. Upon receiving it in my controller, I need to format it correctly by adding an empty arra ...

Tips for showcasing information entered into text fields within a single container within another container

After creating three divs, the first being a parent div and the next two being child divs placed side by side, I encountered an issue with displaying input values. Specifically, I wanted to take values from input text boxes within the second div (floatchil ...

Capture data from Ajax requests and store them in PHP variables

When setting up a DDBB Insert using $.ajax, I encountered an issue. $(document).on('click','.submitMessage', function(){ content=$('textarea').val(); img=$('#messageImg').val(); stdMsg=$('.ms_stdMsg ...

Encountering issues with integrating an external plugin with AngularJS code

For my app, I am attempting to incorporate intercom for monitoring user activity. It functions correctly when placed inside a script tag in index.html. However, I encounter an error when trying to use it in a .ts file as shown below: app/components/rocket/ ...

"Unlocking the Dialog Box: A Step-by-Step Guide to Programatically Opening Material UI Dialog

Typically, Material UI's Dialog is used as shown below, following the documentation: export default function AlertDialog() { const [open, setOpen] = React.useState(false); const handleClickOpen = () => setOpen(true); const handleClose = () =& ...

How about optimizing HTML by utilizing jQuery's magic?

For my website, I aim to allow users to choose a grid size by clicking on elements of a large grid display. This can be compared to selecting a table size in Microsoft Word. Each grid element will have a designated position ID for organization. Instead of ...

After unraveling the unicode in JavaScript, the result often comes out as

Within my .Json file, I have two different unicodes that appear like this: \u30a2\u30eb\u30d0 \u0410\u043d\u0433\u0438\u043b\u044c\u044f When the Javascript code accesses the .Json file using const data = ...

Utilizing Vue JS to set an active state in conjunction with a for loop

Currently in Vue, I have a collection of strings that I am displaying using the v-for directive within a "list-group" component from Bootstrap. My goal is to apply an "active" state when an item is clicked, but I am struggling to identify a specific item w ...

The data returned by the Axios response.data object is full of nonsensical information when making a

I tried experimenting with Axios by writing a quick test function, but the response.data object I received was all jumbled up. I've been searching online for a solution, but I haven't been able to find one. It seems like all the Axios tutorials o ...

Tips for integrating JavaScript code into React JS applications

I am attempting to create a scrollable table that scrolls both horizontally and vertically, using the example provided by . In my project directory under src/components/ScrollExample.js, I have copied and pasted the HTML code. In addition, in src/styles/c ...

How to use jQuery to delete specific table rows while keeping the first row safe from removal

Currently, I have a jQuery script that successfully removes table rows when a button is clicked. However, I want to prevent the button from removing the first row of the table. Is there a way to achieve this? $("#remove").click(function(event) { ...

Guide on utilizing substring string functions in the updated version of Selenium IDE

I am facing a challenge with extracting the word "Automation" from a given string "Welcome to the Automation World" using Selenium IDE Record and Play feature. I have tried using the execute script command, but it doesn't seem to be working as expecte ...

What is the best way to distinguish between relative blocks and convert them to absolute positioning?

What is the best way to locate relative blocks and convert them to absolute position while keeping them in the same place? Is this something that can be achieved using JavaScript or jQuery, or is it simply not possible? Thank you very much. ...

Firefox does not support jQuery AJAX functionality, unlike Internet Explorer where it works smoothly

Can anyone help me figure out how to ensure that this code works smoothly on both IE and Firefox? The confirm prompts are functioning in Firefox, but the AJAX request isn't triggering. According to Firebug, there's an error at line 9631 of jquery ...

Execute an AJAX call to remove a comment

Having some trouble deleting a MySQL record using JavaScript. Here is the JavaScript function I am trying to use: function deletePost(id){ if(confirm('Are you sure?')){ $('#comment_'+id).hide(); http.open("get","/i ...

What is the best way to send form data to MongoDB using React?

I am seeking guidance on how to pass the values of form inputs to my MongoDB database. I am unsure of the process and need assistance. From what I understand, in the post request within my express route where a new Bounty is instantiated, I believe I need ...

Issues with connecting to Socket.IO in Cordova app

I'm having troubles setting up my Cordova app to establish a socket.io websocket connection. Despite following the instructions I found, it doesn't seem to connect when running in debug mode. Can anyone help me troubleshoot this issue? Server Si ...

Is it possible to run javascript code within a Vue component's template?

I'm facing an issue in a vue.js component where I am attempting to compile a variable in a template, but it is not being compiled or converted correctly. Can anyone provide guidance on how I can achieve the desired outcome with the following code: &l ...

tips for transitioning between various json entities

Recently, I created a login page code using JavaScript that runs on a Node Express.js server. Users can input their username/email and password, and all the data gets stored in a JSON file structured like this: {"username":"admin"," ...