Vue-Methode zum Implementieren der ID-Konvertierung: 1. Erstellen Sie den Vue-Komponentencode als „import {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? 
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 '../../api/api'
export default {
data() {
return {
name: null,
id:this.userId
}
},
methods: {
getUserName() {
// alert(this.userId);
//通过用户id查找用户名称
AjaxByAll('get', '/rest/common/getData/sysOrgUserApiService?userId='+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> <el-table-column label="创建人" width="120">
<template slot-scope="scope">
<user-info :userId="scope.row.id"> </user-info>
</template>
</el-table-column>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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
