Vue에서 ID를 변환하는 방법

ID 변환을 구현하는 Vue 방법: 1. Vue 구성 요소 코드를 " {{name}} import {AjaxByAll} from '...'; 2. 들어오는 사용자 ID를 통해 백그라운드 인터페이스를 호출하고 이를 표시할 이름으로 변환합니다.

Windows 10 시스템, Vue. 버전 3, Dell G3 컴퓨터

Vue에서 ID를 변환하는 방법

vue 구성 요소를 사용하여 사람 ID와 이름을 변환합니다.

개발할 때 배경에는 사용자 ID가 하나만 저장되는 경우가 많습니다. , 사람 생성, 사람 수정 등이 있는데 프런트에 표시할 때 아이디를 사람 이름으로 변환해야 합니다.

일반적으로 사람 이름은 이 아이디를 통해 알 수 있습니다. 하지만 실제로는 이러한 변환이 필요한 경우가 많고 백그라운드 처리가 매우 번거롭습니다. , 더 다양하고 간단한 방법이 있을까요?

예, 사용자 ID를 전달하는 Vue 구성 요소를 고려해 볼 수 있습니다. , 컴포넌트는 사람의 이름을 반환하며, 나중에 백그라운드에서 변환할 필요가 없어 어디에서나 사용하기가 더 편리합니다!

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 컴포넌트는 백그라운드 인터페이스를 호출하여 이름 표시로 변환합니다.