So konvertieren Sie eine ID in Vue

Vue-Methode zum Implementieren der ID-Konvertierung: 1. Erstellen Sie den Vue-Komponentencode als „d477f9ce7bf77f53fbcf36bec1b69b7a0399fe30ea98f4e05378029a156f5cc5{{name}}16b28748ea4df4d9c2150843fecfba683f9c12a9649153b97a4b44ea0cb90451import {AjaxByAll} von '...'; 2. Rufen Sie die Hintergrundschnittstelle über die eingehende Benutzer-ID auf und konvertieren Sie sie in einen Namen für die Anzeige 10-System, Vue. Version 3, Dell G3-Computer.

Wie konvertiert man die ID in Vue?

Verwenden Sie die Vue-Komponente, um die Personen-ID und den Namen zu konvertieren. Bei der Entwicklung wird im Hintergrund häufig nur eine Benutzer-ID gespeichert B. Personen erstellen, Personen ändern usw., aber wenn wir sie an der Rezeption anzeigen, müssen wir die ID in den Namen der Person umwandeln.

Im Allgemeinen wird der Name der Person über diese ID gefunden Der Hintergrund, aber in vielen Fällen ist diese Konvertierung erforderlich und die Hintergrundverarbeitung ist sehr mühsam. Gibt es eine vielseitigere und einfachere Methode? Ja, wir können die Vue-Komponente in Betracht ziehen, indem wir eine Benutzer-ID übergeben Gibt den Namen der Person zurück und muss in Zukunft nicht mehr im Hintergrund konvertiert werden.

Der Vue-Komponentencode lautet wie folgt:

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

Wie oben erwähnt, ruft die Vue-Komponente auf die Hintergrundschnittstelle und wandelt sie in eine Namensanzeige um

Die Komponente wird wie folgt verwendet:

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

Die obige Komponente hat die Funktion „Personal-ID“ implementiert. Sollten wir jedoch weiterhin grundlegende Komponenten wie Personal-Visitenkarten und Personal-Avatare implementieren, können diese Komponenten überall verwendet werden :

Es gibt jetzt kein Problem mit der Funktion und die Seite kann normal angezeigt werden, es wurde jedoch festgestellt, dass die Schnittstelle zum Konvertieren der Personen-ID in den Namen zweimal aufgerufen wird, wenn die Seite zweimal geladen wird

Aber ich bin kein Front-End-Profi, daher habe ich noch keine Lösung gefunden. Wenn Sie wissen, wie man das Problem löst, hinterlassen Sie bitte eine Nachricht. Vielen Dank. Empfehlen Sie das Lernen: „

Vue-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie eine ID in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!