배열을 비교할 때 항목 표시/숨김

배열을 비교할 때 항목 표시/숨김

제 고민은 다음과 같습니다.

1. 나는 가지고 있다.tags체크박스의 목록을 작성하기 위해 루프하는 데 사용되는 배열입니다.
2. 나는 가지고 있다selectTags선택한 태그를 저장합니다.태그가 체크/체크 해제될 때마다 이 배열이 업데이트됩니다.
3. 나는 가지고 있다.images다음과 같이 이미지 URL 및 이미지 태그를 저장하는 객체:

days : {
    day1 : {
        image1: {
            url : '',
            tags: ['tag1', 'tag2']
        },
        image2: {
            url : '',
            tags: ['tag1']
        },
    },
    day2 : {
        image1: {
            url : '',
            tags: ['tag3']
        },
        image2: {
            url : '',
            tags: ['tag1']
        },
    }
}

루프 컴포넌트 내에서 다음 작업을 수행하여 이미지를 표시합니다.

<figure v-for="(image, index) in images" :key="index">
    <img :src="image['url']" alt="">
</figure>

선택한 태그에 따라 이미지를 숨기거나 표시해야 합니다.

해결책을 찾은 것 같아

<figure
    v-for="(image, index) in images" 
   :key="index" 
    v-show="selectTags.filter(item => image['tags'].indexOf(item) > -1).length"
>
    <img :src="image['url']" alt="">
</figure>

이게 최선의 방법인지 모르겠어요.그래서 제안을 환영합니다.

언급URL : https://stackoverflow.com/questions/59089451/show-hide-items-when-comparing-arrays