[Vuejs]-How can I convert "Vue JS value to PHP value and PHP value to Vue JS value"?

by

6👍

✅

you can use axios for getting the data from database, you dont have to write php. That is how you can get the data from database using axios in vue.js.

<script>
 export default {
   data() {
      return {
        users: [],
     }
  },
    methods: {
      loadusers(){
        axios.get('users').then(response => this.users= response.data);
       },
   }
 },
    mounted() {
     this.loadusers();
  }
</script>

Your Controller:

public function index()
    {
      return User::all();
    }

your web.php:

Route::resource('users', 'UserController');
👤Sajad Haibat

1👍

What you have to do is to create your PHP APIs that returns your data in JSON format and use axios to send requests and get that data then you use it on your frontend in vue, to send a request to where your PHP endpoint is use.

<script>
export default {
 data() {
  return {
    patients: [],
 }
 },
methods: {
  loadpatients(){
    axios.get('http://127.0.0.1:8000/patients').then(response => this.patients= response.data);
   },
}
},
created() {
 this.loadpatients();
}
</script>
👤Kaddu Livingstone

1👍

In Laravel Side

Inside User Controller

public function getUsers()
    {

        $data['users'] = User::all();
        return response()->json(['data'=>$data,'status'=>true]);
    }

your web.php:

Route::get('users', [\App\Http\Controllers\Api\UserController::class, 'getUsers']);

In Vue.js Page

Use axios to get users data from Api
and render data on html.

<div v-for='(item,index) in users' :key='item.id'>
                      
                      {{item.name}}
                    </div>
              
<script>
export default {
  
  data() {
    return {

    users: [],
      
    };
  },
  
  methods: {

     getUsers(){

     this.$axios.get(`users`)
            .then(response => {

            this.users=response.data.data.users
          });
      
      })

    },
   
  
  mounted(){
      this.getUsers()
  },

};
</script>
👤Talha Fayyaz

Leave a comment