How to convert id in vue

Vue implements the method of converting id: 1. Create the Vue component code as "d477f9ce7bf77f53fbcf36bec1b69b7a0399fe30ea98f4e05378029a156f5cc5{{name}}16b28748ea4df4d9c2150843fecfba68< ;/template>3f1c4e4b6b16bbbd69b2ee476dc4f83aimport {AjaxByAll} from '...'; 2. Call the background interface through the incoming user ID and convert it into a name for display.

The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

How does vue convert id?

Skillfully use vue components to convert personnel IDs and names

When we develop, the background often only stores one user ID, such as the creator, the modifyer, etc., but when we display it in the front desk, we need Convert the Id to the person's name for display.

Generally, the person's name is often found through this Id in the background, but in fact, many situations require such conversion. The background processing is very troublesome. Is there a more universal and simple method? Yes!

Yes, we can consider the Vue component, pass in a user ID, and the component returns the person's name, so there is no need for background conversion in the future. And this component can be used everywhere on the page code, so More convenient!

The Vue component code is as follows:

<template>
    <div class="mc-user-info">
    {{name}}
    </div>
</template>
<script>
    import {AjaxByAll} from &#39;../../api/api&#39;
    export default {
        data() {
            return {
                name: null,
                id:this.userId
            }
        },
        methods: {
            getUserName() {
               // alert(this.userId);
                //通过用户id查找用户名称
                AjaxByAll(&#39;get&#39;, &#39;/rest/common/getData/sysOrgUserApiService?userId=&#39;+this.id, null).then(data => {
                    if (data.code === 200) {
                       this.name=data.data
                    }
                });
            }
        },
        watch: {
        },
        mounted: function () {
            console.log(this.id);
            this.getUserName();
        },
        props: {
            userId: String,
            required: true
        }
    }
</script>
<style>
</style>

As mentioned above, the Vue component calls the background interface through the incoming user ID and converts it into a name display.

The component is used as follows:

 <el-table-column   label="创建人" width="120">
                <template slot-scope="scope">
                <user-info :userId="scope.row.id">  </user-info>
                </template>
</el-table-column>

At this point, the development of the personnel Id to name component has been completed!

• Extended thoughts:

The above The component implements the function of converting personnel ID to name, but should we use divergent thinking to continue to implement basic component functions such as personnel business cards and personnel avatars. In this way, these components can be used everywhere.

• Left issues:

There is no problem with the function now, and the page can be displayed normally. However, it is found that when the page is loaded, the interface for converting personnel ID to name is called twice, that is, mounted is loaded twice.

But I am not professional in front-end, so I haven’t found a solution yet. If you know how to solve it, please leave a message, thank you

Recommended study: "vue video tutorial"

The above is the detailed content of How to convert id in vue. For more information, please follow other related articles on the PHP Chinese website!