如何将“Vue JS 值转换为 PHP 值，PHP 值转换为 Vue JS 值”？答案

【问题标题】：How can I convert "Vue JS value to PHP value and PHP value to Vue JS value"?如何将“Vue JS 值转换为 PHP 值，PHP 值转换为 Vue JS 值”？
【发布时间】：2019-09-25 03:18:32
【问题描述】：

这可能吗？？ 任何人请帮助我。如何将“Vue JS 值转换为 PHP 值，PHP 值转换为 Vue JS 值”？



<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>

【问题讨论】：

如果要从数据库中检索值，请使用axios 并调用控制器方法来查询数据库并将响应发送回 VueJS
不客气！

标签： php laravel vue.js

【解决方案1】：

您可以使用 axios 从数据库中获取数据，您不必编写 php.ini 文件。这就是在 vue.js 中使用 axios 从数据库中获取数据的方式。

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

你的控制器：

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

你的 web.php：

Route::resource('users', 'UserController');

【讨论】：

【解决方案2】：

您需要做的是创建您的 PHP API，以 JSON 格式返回您的数据，并使用 axios 发送请求并获取该数据，然后您在 vue 的前端使用它，将请求发送到您的 PHP 端点正在使用。

<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>

【讨论】：

【解决方案3】：

在 Laravel 端

在用户控制器内部

public function getUsers()
    {

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

你的 web.php：

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

在 Vue.js 页面中

使用 axios 从 Api 获取用户数据并在 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>

【讨论】：