CODEWITHSUNDEEP
vue.js
Nancy
Nancy

Reputation: 1051

How to take a user_id in vue and find the user name

I have this array of data,

[ { "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" } ]

The user id is the one called causer_id, how do I take this and show instead the user name?

This is being done in the vue.js file inside a table 

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

Is there a way I can make a function and pass it the id and get returned the users name?

Upvotes: 0

Views: 1735

Answers (1)

tprj29
tprj29

Reputation: 234

You need to create a method that will get the name of the user. Then you will create a route in Laravel that will return that query that user based on the id you just passed and returns the user.

In your table inside the Vue component:

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

In your Vue component:

 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;
                    }
                );
        },

In your laravel route file

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

In your laravel UserController file

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

Upvotes: 2

Related Questions