Vue.js 如何在vue中获取用户名并查找用户名

我有一组数据

[{“id”：6，“log_name”：“default”，“description”：“Eliminado”，“subject_id”：12，“subject_type”：“App\Models\DiscussionForum”，“causer_id”：1，“causer_type”：“App\Models\User”，“properties”：[]，“created_at”：“2019-11-20 09:30:30”，“updated_at”：“2019-11-20 09:30:30”]

用户id是一个名为“

causer\u id

”的id，我该如何处理它并显示用户名

这是在表中的vue.js文件中完成的

<el-table
    :data="logs"
    label-width="120px"
    height="550">
    <el-table-column
        width="150"
        label="Fecha">
        <template slot-scope="scope">
            {{ formatDate(scope.row.created_at) }}
        </template>
    </el-table-column>
    <el-table-column
        label="Accion">
        <template slot-scope="scope">
            {{'El ' + formatModel(scope.row.subject_type)
            + ' con id: ' + scope.row.subject_id
            + ' ha sido ' + scope.row.description}}
        </template>
    </el-table-column>
    <el-table-column
        label="Hecho por">
        <template slot-scope="scope">
            {{scope.row.causer_id}}
        </template>
    </el-table-column>
</el-table>

{{formatDate（scope.row.created_at）}
{{'El'+formatModel（scope.row.subject_类型）
+“con id:”+scope.row.subject\u id
+'ha sido'+scope.row.description}
{{scope.row.causer_id}

---

有没有一种方法可以创建一个函数，并将id传递给它，然后返回用户名？

您需要创建一个方法来获取用户名。然后，您将在Laravel中创建一个路由，该路由将根据刚才传递的id返回该用户的查询，并返回该用户

在Vue组件内的表中：

<el-table
    :data="logs"
    label-width="120px"
    height="550">
    ...
    <el-table-column
        label="Hecho por">
        <template slot-scope="scope">
            {{displayUserName(scope.row.causer_id)}}
        </template>
    </el-table-column>
</el-table>

 data: { userNames: []      },
 mounted() {
        this.getUserNames();
    },
 methods: {
    getUserNames() {
       $.each(this.users, function (index, user))
       {
            this.getUserName(user.id);
       }
    },
    displayUserName(userId)
    {
       return this.userNames.userId;
    },
    getUserName(userId) {
            this.$http.get('/user/'+userId)
                .then(response => {
                        this.userNames.userId = response.data.name;
                    }
                );
        },

在您的laravel路由文件中

 Route::get('/user/{userId}', 'UserController@view')

在您的laravel UserController文件中

public function view($userId)
{
    $user = User::findOrFail($userId);
    return $user;
}

---

您需要创建一个方法来获取用户的名称。然后，您将在Laravel中创建一个路由，该路由将根据刚才传递的id返回该用户的查询，并返回该用户

在Vue组件内的表中：

<el-table
    :data="logs"
    label-width="120px"
    height="550">
    ...
    <el-table-column
        label="Hecho por">
        <template slot-scope="scope">
            {{displayUserName(scope.row.causer_id)}}
        </template>
    </el-table-column>
</el-table>

 data: { userNames: []      },
 mounted() {
        this.getUserNames();
    },
 methods: {
    getUserNames() {
       $.each(this.users, function (index, user))
       {
            this.getUserName(user.id);
       }
    },
    displayUserName(userId)
    {
       return this.userNames.userId;
    },
    getUserName(userId) {
            this.$http.get('/user/'+userId)
                .then(response => {
                        this.userNames.userId = response.data.name;
                    }
                );
        },

在您的laravel路由文件中

 Route::get('/user/{userId}', 'UserController@view')

在您的laravel UserController文件中

public function view($userId)
{
    $user = User::findOrFail($userId);
    return $user;
}

---

如果我对它进行控制台操作，但由于某种原因，我的表中没有显示出来？我用el表列的一个示例更新了我的答案：

{{getUserName（scope.row.causer_id）}

这不起作用，因为

getUserName

没有返回任何内容，而您正试图用以下代码显示其返回值：

{getUserName]（scope.row.causer_id）}

@tprj29我就是这样做的，名字没有显示出来up@MatJ我应该怎么做呢？如果我对它进行了控制台操作，但某些原因没有出现在我的表中，这会起作用。我用el表列的一个示例更新了我的答案

{{getUserName（scope.row.causer_id）}

这不起作用，因为

getUserName

没有返回任何内容，并且您正试图用此代码显示其返回值：

{{getUserName（scope.row.causer\u id）}

@tprj29我就是这样做的，名字没有显示出来up@MatJ我应该怎么做呢？您需要创建一个名为username的新组件，添加一个prop userid，然后当它更改时，发出一个类似于下面答案的ajax请求，并将其设置为数据属性，然后在模板中显示该属性。在请求时显示加载如果需要，正在进行。您需要创建一个名为username的新组件，添加一个prop userid，然后在其更改时，发出类似于下面答案的ajax请求，并将其设置为数据属性，然后在模板中显示该属性。如果需要，请在请求进行时显示加载。