使用 Vuejs Laravel Axios 在表单字段中填充当前用户信息答案

【问题标题】：Populate current user informations in the form fields using Vuejs Laravel Axios使用 Vuejs Laravel Axios 在表单字段中填充当前用户信息
【发布时间】：2020-08-04 05:08:01
【问题描述】：

我想使用 Vuejs Laravel Axios 在表单字段中填充当前用户信息。在 UserController.vue 我有这段代码可以从 API 获取 auth 用户信息：

public function profile()
    {
        //
        return auth('api')->user();
    }

在 API.php 文件的路由中我写了这个：

Route::get('profile', 'API\UserController@profile');

在profil.vue 页面我有这些信息：

<script>
 import Form from 'vform';
    export default {
        data(){
            return {
              form: new Form({
              id : '',
              name : '',
              email : '',
              password : '',
              type : '',
              bio : '',
              photo : ''
            })
            }
        },
        mounted() {
            console.log('Component mounted.')
        },

        created() {
            // affichage des informations de l'utilisateur connecté sur le formulaire
            axios.get("./api/profile")
            .then(({ data }) => (this.form.fill(data)));
        }
    }
</script>

例如，我想在表单字段中显示当前用户信息：

<div class="form-group row">
     <label for="name" class="col-sm-2 control-label">Nom</label>
          <div class="col-sm-12">
               <input v-model="form.name" type="text" class="form-control" id="name" name="name" placeholder="Nom">
          </div>
</div>

我使用 Laravel v7.6.2 和 vuejs 2

谢谢。

【问题讨论】：

标签： javascript laravel vue.js axios

【解决方案1】：

您向我们展示的代码应该已经可以正常工作了。 vform 的 fill 方法将正确地用获取的数据填充表单。

您只需在表单模板中使用相应的 v-model 指令添加不同的输入。

【讨论】：

感谢您的回答，不幸的是，我将相应的 v-model 指令放入我的表单中，但我没有得到任何数据。而当添加 console.log axios.get("./api/profil") .then(({ data }) => (console.log(data)));看看发生了什么我得到看起来一切正常，但我没有得到任何数据。
在 vuejs devtools rooter-view: /profil 表单字段返回 : undefined 并且我没有收到任何错误。我使用的是 Laravel 最新版本。