VueでIDを変換する方法

Vue は ID を変換するメソッドを実装します。 1. Vue コンポーネント コードを「d477f9ce7bf77f53fbcf36bec1b69b7a0399fe30ea98f4e05378029a156f5cc5{{name}}84df575864cceab7183c19f0990c0e8f3f1c4e4b6b16bbbd69b2ee476dc4f83aimport {AjaxByAll} from '...'; 2. 受信ユーザー ID を介してバックグラウンド インターフェイスを呼び出し、それを表示用の名前に変換します。

このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。

vue はどのように ID を変換しますか?

vue コンポーネントを上手に使って担当者 ID と名前を変換する

開発時、バックグラウンドには作成者、変更者などの 1 つのユーザー ID のみが保存されることがよくありますが、フロントに表示する場合は、IDをその人の名前に変換して表示する必要があります

通常、このIDからバックグラウンドで人の名前を知ることができますが、多くの場合、このように変換します。バックグラウンド処理は非常に面倒です。もっと汎用的で簡単な方法はありますか? はい!

はい、Vue コンポーネントを検討し、ユーザー ID を渡すと、コンポーネントが人の名前を返します。なので、今後バックグラウンドで変換する必要はありません。また、このコンポーネントはページ コードのどこでも使用できるので、さらに便利です!

Vue コンポーネントのコードは次のとおりです:

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

前述したように、Vue コンポーネントは受信ユーザー ID を介してバックグラウンド インターフェイスを呼び出し、それを名前表示に変換します。

コンポーネントは次のように使用されます:

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

この時点で、開発人事IDを名前に変換するコンポーネントが完成しました!

拡張思考:

• 上記コンポーネントは、人事IDを名前に変換する機能を実装しています。名前は変わりませんが、人事名刺や人事アバターなどの基本的なコンポーネント機能を引き続き実装するには、発散的思考を使用する必要があります。このようにして、これらのコンポーネントはどこでも使用できます。

現時点では機能に問題はなく、ページは正常に表示されていますが、ページを読み込む際に、担当者IDを名前に変換するインターフェースがおかしいことが分かりました。

• ただし、私はフロントエンドの専門家ではないので、まだ解決策が見つかりません。解決方法をご存知の場合は、メッセージを残してください。ありがとうございます
  推奨学習:「
vue ビデオ チュートリアル

」

以上がVueでIDを変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。