Comment convertir l'identifiant en vue

Méthode Vue pour implémenter la conversion d'ID : 1. Créez le code du composant Vue sous la forme "d477f9ce7bf77f53fbcf36bec1b69b7a0399fe30ea98f4e05378029a156f5cc5{{name}}16b28748ea4df4d9c2150843fecfba683f9c12a9649153b97a4b44ea0cb90451import {AjaxByAll} from '...'; 2. Appelez l'interface d'arrière-plan via l'ID utilisateur entrant et convertissez-la en un nom à afficher

L'environnement d'exploitation de ce tutoriel : Windows. 10, Vue. Version 3, ordinateur Dell G3

Comment convertir l'identifiant en vue ?

Utiliser le composant vue pour convertir l'identifiant et le nom de la personne

Lorsque nous développons, l'arrière-plan ne stocke souvent qu'un seul identifiant utilisateur. , comme créer des personnes, modifier des personnes, etc., mais lorsque nous l'affichons à la réception, nous devons convertir l'identifiant en nom de la personne

Généralement, le nom de la personne se trouve via cet identifiant dans. l'arrière-plan, mais dans de nombreux cas, cette conversion est requise, et le traitement en arrière-plan est très gênant, existe-t-il une méthode plus polyvalente et plus simple

Oui, nous pouvons considérer le composant Vue, en passant un identifiant utilisateur, le composant ? renvoie le nom de la personne, et il n'est pas nécessaire de le convertir en arrière-plan à l'avenir. Il est plus pratique de l'utiliser partout

Le code du composant Vue est le suivant :

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

Comme mentionné ci-dessus, le composant Vue appelle ! l'interface d'arrière-plan et le convertit en un affichage de nom.

Le composant est utilisé comme suit :

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

. À ce stade, le composant ID du personnel en nom a été développé ! Le composant ci-dessus a implémenté l'identifiant du personnel pour nommer la fonction, mais devrions-nous continuer à implémenter des composants de base tels que des cartes de visite du personnel et des avatars du personnel avec une fonction de pensée divergente ? De cette façon, ces composants peuvent être utilisés partout

Problèmes restants. :
Il n'y a aucun problème avec la fonction maintenant, et la page peut être affichée normalement, mais on constate que l'interface de conversion de l'identifiant de la personne en nom est appelée deux fois lorsque la page est chargée deux fois

.

Mais je ne suis pas professionnel en front-end, donc je n'ai pas encore trouvé de solution Si vous savez comment le résoudre, merci de laisser un message, merci

Recommander l'apprentissage : "
• tutoriel vidéo vue

  "

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!