[Vue 3] Vue 객체 배열 일부 반환 방법

 

filter 를 사용해서 해결하는 방법

const busineseCards = ref([{
    name: '일론 머스크',
    title: '테슬라 테크노킹' ,indexx : 1
}, { name: '래리 엘리슨', title: '오라클 창업주' ,indexx : 2},
{ name: '빌 게이츠', title: '마이크로소프트 공동창업주' ,indexx : 3},
{ name: '래리 페이지', title: '구글 공동창업주' ,indexx : 4},
{ name: '세르게이 브린', title: '구글 공동창업주' ,indexx : 5}])

const deleteCardEventt = function (indexx) {
    const tmp = busineseCards.value.filter((io)=>
        io.indexx !== indexx
    )
    busineseCards.value = tmp
 }

 

tmp라는 임시 객체 배열을 선언하고

busineseCards 객체 배열의 값을 filter 거르는 작업을 하는데

(io 어떤 값이든 상관없음) => io.indexx !== indexx

io.indexx 는 busineseCards 객체 배열의 index에 접근하겠다는 의미

indexx 는 클릭했을 때 실행되는 자식 Vue의 indexx를 의미

 

그렇게 걸러진 tmp의 값을

busineseCards.value에 삽입해 출력한다.

이때 busineseCards 객체 배열이 ref (동적) 로 선언되어 있지 않으면 바뀌지 않는다.