객체의 아이템의 값에 따라 v-if로 제어하기

<div v-if="isDimOpen" class="popup-dimmed"></div>

  export default {
    data() {
      return {
        currentId: null,
        lastFocusedElement: [],
        isModalOpen: {
          popup1: false,
          popup2: false,
          popup3: false,
          popup4: false,
        },
      }
    },
  }

isModalOpen 객체의 아이템중 하나라도 true가 되면 isDimOpen을 true로, isModalOpen 객체의 아이템이 전부 false가 되면 isDimOpen을 false로 설정을 하려면 어떻게 해야할까?

isModalOpen은 배열이 아니라 객체지만, Object.values()를 활용하면 some()이나 every() 같은 배열 메서드를 그대로 사용할 수 있다.

✅ 핵심 아이디어

Object.values(this.isModalOpen).some(Boolean)

이렇게 하면 popup1 ~ popup4 중 하나라도 true일 경우 true 반환!
every(Boolean)도 반대로 모두 true일 때만 true를 반환한다.

✅ 자동으로 isDimOpen을 설정하는 방법 3가지

✅ 1. Vue 2에서 watch로 감시하기

watch: {
  isModalOpen: {
    handler(newVal) {
      this.isDimOpen = Object.values(newVal).some(Boolean)
    },
    deep: true
  }
}

✔️ popup1, popup2 중 하나라도 true면 dim이 열리고, 모두 false면 닫힘

✅ 2. Vue 3에서는 computed로도 가능

const isModalOpen = reactive({
  popup1: false,
  popup2: false,
  popup3: false,
})

const isDimOpen = computed(() => {
  return Object.values(isModalOpen).some(Boolean)
})

isDimOpen은 반응형으로 자동 업데이트됨

✅ 3. Vue 2에서도 computed로 가능 (읽기 전용)

computed: {
  isDimOpen() {
    return Object.values(this.isModalOpen).some(Boolean)
  }
}

 

이 방식은 isDimOpen을 직접 제어하지 않고 자동 처리할 수 있다.

🧠 보너스: Object.values()를 이용한 예시

const modalStates = {
  popup1: false,
  popup2: true,
  popup3: false,
}

const anyOpen = Object.values(modalStates).some(Boolean) // true
const allClosed = Object.values(modalStates).every(val => !val) // false

✨ 추천

• isDimOpen을 자동 상태로 관리하고 싶다면 computed 사용
• 외부에서 isDimOpen을 수동으로 조작해야 한다면 watch + some() 사용