vue怎麼實作轉換id

vue實作轉換id的方法：1.建立Vue元件程式碼為「 {{name}} &lt ;/template> import {AjaxByAll} from '...'；2、透過傳入的使用者Id，呼叫後台接口，轉換成名稱顯示即可。

#本教學操作環境：Windows10系統、Vue 3版、Dell G3電腦。

vue怎麼實作轉換id？

巧用vue元件實現人員id及名稱的轉換

我們開發時，後台很多時候都只儲存一個用戶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轉名稱的接口，即mounted加載了兩次。 ## ####但個人對於前端也不是專業的，暫時沒有找到辦法。如果你知道如何解決，麻煩請留言，謝謝######推薦學習：《###vue視頻教程###》# ##