Vue에서 ID를 변환하는 방법

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

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

Vue에서 ID를 변환하는 방법

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

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

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

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

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

컴포넌트는 다음과 같이 사용됩니다.

 <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를 이름으로 변환하는 인터페이스가 2번 호출되는 것으로 확인되었습니다.

하지만 저는 프론트엔드 전문가가 아니기 때문에 아직 해결책을 찾지 못했습니다. 해결 방법을 알고 계시다면 메시지를 남겨주세요. 감사합니다

• 추천 학습: "

  vue 비디오 튜토리얼

  "

위 내용은 Vue에서 ID를 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!