Bagaimana untuk menukar id dalam vue

Kaedah Vue untuk melaksanakan penukaran id: 1. Cipta kod komponen Vue sebagai "d477f9ce7bf77f53fbcf36bec1b69b7a0399fe30ea98f4e05378029a156f5cc5{{name}}16b28748ea4df4d9c2150843fecfba68 < ;/template>855348821b2e8f2cc4b633bf98f064dfimport {AjaxByAll} daripada '...'; tutorial ini: Sistem Windows 10, versi Vue 3, komputer Dell G3

Bagaimana untuk menukar ID dalam vue Dengan mahir menggunakan komponen vue untuk menukar ID dan nama kakitangan

Apabila kami membangun, latar belakang selalunya hanya menyimpan satu ID pengguna, seperti pencipta, pengubah suai, dll., tetapi apabila kami memaparkannya di meja depan, kami memerlukan Tukar Id kepada paparan nama orang

Biasanya, nama orang ditemui melalui Id ini di latar belakang, bagaimanapun, dalam banyak kes, ia perlu untuk menukar dengan cara ini sangat menyusahkan Ya, kami boleh mempertimbangkan komponen Vue, memasukkan ID pengguna, komponen itu mengembalikan nama orang itu, dan tidak perlu melakukan penukaran latar belakang pada masa hadapan, dan komponen ini boleh digunakan di mana-mana dalam kod halaman ! Kod komponen Vue adalah seperti berikut:

Seperti yang dinyatakan di atas, komponen Vue memanggil antara muka latar belakang melalui ID pengguna masuk dan menukarnya menjadi paparan nama 🎜> Komponen digunakan seperti berikut:

ID personel untuk menamakan komponen penukaran telah dibangunkan

Pemikiran lanjutan:

Komponen di atas melaksanakan fungsi menukar ID kakitangan kepada nama, tetapi perlukah kita menggunakan pemikiran berbeza untuk terus melaksanakan fungsi komponen asas seperti kad perniagaan kakitangan dan avatar kakitangan Dengan cara ini, komponen ini boleh digunakan di mana-mana. >Isu yang tinggal:

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

Tiada masalah dengan fungsi sekarang, dan halaman boleh dipaparkan seperti biasa Walau bagaimanapun, didapati bahawa apabila halaman dimuatkan, antara muka untuk menukar kakitangan ID untuk menamakan dipanggil dua kali, iaitu, dipasang dua kali. 　　

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

Tetapi saya tidak profesional di bahagian hadapan, jadi saya belum menemui penyelesaiannya. sila tinggalkan mesej, terima kasih

Syorkan pembelajaran: "

tutorial video vue
• 》

Atas ialah kandungan terperinci Bagaimana untuk menukar id dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!