adjust the url when fetching data in vue.js component

Question

So i am trying to fetch data in my vue component as you can see below. But because iam reqesting the fetch from my blade view in public/manage-users-projects the url becomes

http://localhost:8080/ProjsiteWebApp/app/public/manage-users-projects/get-projects-json

but i want to fetch data from this url

http://localhost:8080/ProjsiteWebApp/app/public/get-projects-json

So i can i sort of return one route and execute from the public folder?

export default {


    created(){
        this.fetchProjects();
    },


    methods:{
        fetchProjects() {
            fetch('get-projects-json')
                .then(res => res.json())
                .then(res => {
                    console.log(res.data);
                })
        }
    }
    
    

};






Route::get('get-projects-json', 'ProjectsController@getProjectsJson');

Why is this part of route needed: "ProjsiteWebApp/app/public" ? did you add it on purpose as a prefix ? — Ziad Adeela
– Ziad Adeela, Commented Nov 1, 2020 at 13:21
that is the exact url that the fetch methods calls on based on my parameter. — Rob
– Rob, Commented Nov 1, 2020 at 13:29

tony19 · Accepted Answer · 2022-07-15 02:26:53Z

1

You can pass the route as props to the component inside the blade file.

Inside the view:

<component get-projects-json="{{ url('get-projects-json') }}"></component>

Inside the vue component:

<script> 
    export default {
        props: ['getProjectsJson'],
    }
</script>

Then you can access the route inside the component like so:

export default {


    created(){
        this.fetchProjects();
    },


    methods:{
        fetchProjects() {
            fetch(this.getProjectsJson)
                .then(res => res.json())
                .then(res => {
                    console.log(res.data);
                })
        }
    }
    
    

};

You can learn more about props here: https://v2.vuejs.org/v2/guide/components-props.html

edited Jul 15, 2022 at 2:26

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 1, 2020 at 14:00

Babak Asadzadeh

1,2471 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

adjust the url when fetching data in vue.js component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related