How do I import backend data from PHP(My SQL) into vuejs application

Question

I am currently working on a food ordering mobile web-based application as my project. As this is my very first project in web programming, I do hope that I am able to obtain some clarity. At the moment, I have managed to finalize the design portion of the project. I am looking on how to import the backend data from PHP and MySQL into the vuejs application(as the frontend/user side). I have looked for various posts regarding it, but I still unable to understand.

What do I need to look for when importing the data from PHP with MySQL into the VueJS application? In the backend data, it contains data such as nutrients, cholesterol, and fats, etc, plus pictures, as the backend data(will be controlled by the chefs, as each day the food will be different and updated compared to other days). Therefore, with this data, I do plan to import these data into the application.

I appreciate the advice in advance to approach this obstacle.

Hardik Raval · Accepted Answer · 2020-01-10 05:55:26Z

1

Vue.js is a front-end javascript framework so it only renders HTML, CSS, and Javascript in browsers. You really can't import data like in the backend we do.

So that means you need to consume an API/Service and fetch the data and display it.

You can use Vue Axios, Vue-Resource to make HTTP/Ajax requests and get the result.

Example:

    <ul>
       <li v-for="user in users">{{ user.first_name }}</li>
    </ul>

    getUsers(){
        this.axios.get("https://reqres.in/api/users").then((response) => {
            this.users = response.data.data;
        });
    }

edited Jan 10, 2020 at 5:55

answered Jan 10, 2020 at 4:52

Hardik Raval

3,6911 gold badge30 silver badges31 bronze badges

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

Comments

salman · Accepted Answer · 2020-01-10 04:25:22Z

0

you need to make restapi to call on the frontend side(vuejs) using axios library. you can see a basic example of PHP, MySQL and vuejs web app. https://morioh.com/p/7a2ac36f37cc or if you want it with laravel then you can check this link https://vuejsdevelopers.com/2018/02/05/vue-laravel-crud/

answered Jan 10, 2020 at 4:25

salman

3142 silver badges10 bronze badges

Collectives™ on Stack Overflow

How do I import backend data from PHP(My SQL) into vuejs application

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related