0

Is this possible ?? anyone please help me . How can I convert "Vue JS value to PHP value and PHP value to Vue JS value" ?

<span v-for="comment in post.comments"> <?php $ud = comment.userId; $commentUser = DB::table('users') ->where('users.id', '=', $ud) ->first(); ?> <div class="post-comment" style="border-bottom: 1px solid #e6e6e6;margin-left: 5px;"> <!-- <img :src="'{{Config::get('app.url')}}/BUproject/public/frontEnd/images/users/' + post.user.pic" alt="" class="profile-photo-sm" style=" margin-bottom: 5px; margin-top:4px;"/>--> <img src="{{asset('public/frontEnd/')}}/images/users/{{$commentUser->pic}}" alt="" class="profile-photo-sm" /> <p style="margin-right: 15px;"><a :href="'{{url('/timeline')}}/' + comment.slug" class="profile-link">@{{post.user.firstName | uppercase}} @{{post.user.lastName}}</a> @{{comment.comment}} </p> </div> </span>
1
  • 1
    If you want to retrieve a value from your database, use axios and call a controller method to query the DB and send the response back to VueJS Commented Sep 25, 2019 at 3:28

3 Answers 3

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');

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

Comments

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>

Comments

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.