VueでIDを変換する方法

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

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

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

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

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

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

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

Vue コンポーネントのコードは次のとおりです: {{name}} 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 } } ログイン後にコピー

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

コンポーネントは次のように使用されます: ログイン後にコピー

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

拡張思考:

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

現時点では機能に問題はなく、ページは正常に表示されていますが、ページを読み込む際に、担当者IDを名前に変換するインターフェースがおかしいことが分かりました。 ただし、私はフロントエンドの専門家ではないので、まだ解決策が見つかりません。解決方法をご存知の場合は、メッセージを残してください。ありがとうございます

推奨学習:「 vue ビデオ チュートリアル 」