[vue] v-if 내 조건으로 filter로 데이터 변환 후 비교하기

vue js v-if filter 활용하는 방법

 

vue.js에서 v-if 조건 중 filter를 통해 정제된 데이터 값이랑 비교하고  싶을 때가 있다.

📌v-if문 시 filter로 이용한 데이터 값 조건으로 넣어주기

v-if="$options.filters.필터명(필터파라미터)"

 

 

샘플 코드

filter를 통해서 user레벨을 확인한 뒤 그에 따른 인사말을 v-if를 이용해서 출력하는 코드이다.

<template>
    <div>
        로그인회원 레벨 : {{$options.filters.levelCheck(userList, loginUser.id)}}
        <div v-if="$options.filters.levelCheck(userList, loginUser.id) === 2">
            안녕하세요! 정회원이시네요!
        </div>
        <div v-else>
            안녕하세요! 준회원이시네요!
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                userList: [
                    {id:1, name:'김철수', level:1},
                    {id:2, name:'김한나', level:2},
                    {id:3, name:'이사랑', level:2},
                    ],
                loginUser:'',
            }
        },
        mounted() {
          this.loginUser = this.userList[0];
        },
        filters: {
            levelCheck(object,id) {
                if (object === undefined || object === null || object === "") {
                    return -1
                } else {
                    let target = object.filter(object => object.id === id);
                    if (target.length === 0) {
                        return
                    } else {
                        return target[0].level
                    }
                }
            },
        },
    }
</script>

만약 필터를 통해서 준회원인지 정회원인지 확인하고

그에 맞는 텍스트를 보여줘야 하는 상황이라면

회원 레벨을 체크하는 필터를 만든 뒤

v-if에서 user를 확인해서 출력된 level 값에 따른 텍스트를 보여준다.

 

 

결과 화면

 

만약 로그인 user가 0번 김철수 일 경우

v-if vue filter조건으로 사용하기

 

만약 로그인 user가 1번인 김한나 일 경우

v-if vue filter 결과화면

조건에 따라 텍스트가 변경된 것을 확인할 수 있다.