[ 오류 해결 ] vue/no-use-v-if-with-v-for : v-for과 v-if 같은 태그에서 사용하면 생기는 오류

from canva

error image

🚩 문제의 원인

<div v-for="item in items" v-if="item.isActive">
  {{ item.name }}
</div>

Vue에서 같은 엘리먼트에 v-if 와  v-for 를 함께 사용하기 때문에 생기는 오류입니다.

이 방식은 Vue에서 권장하지 않습니다. 왜냐하면 v-for 로 반복 후, 그 내부에서 v-if로 조건을 체크하면 성능이 저하되고 예상치 못한 버그를 유발할 수 있기 때문입니다.

 

✅ 해결 방법

방법 1. computed 사용 (권장)

<script setup>
import { computed } from 'vue';

const items = [/* 데이터 */];

const activeItems = computed(() => items.filter(item => item.isActive));
</script>

<template>
  <div v-for="item in activeItems" :key="item.id">
    {{ item.name }}
  </div>
</template>

computed 를 활용하여 필터링합니다.

 

방법 2. <template> 로 감싸기

<template v-for="item in items" :key="item.id">
  <div v-if="item.isActive">
    {{ item.name }}
  </div>
</template>

반드시 함께 써야 한다면 아래와 같은 방법으로 가능합니다.
<tempate> 태그는 반드시 최상위에 사용해야 합니다.

 

방법 3. Eslint 설정에서 예외 처리하기

// .eslintrc.js
module.exports = {
  extends: ['plugin:vue/vue3-essential'],
  rules: {
    'vue/no-use-v-if-with-v-for': 'off', // 완전히 끄기 (비추천)
    // 또는
    'vue/no-use-v-if-with-v-for': ['error', {
      allowUsingIterationVar: true // 반복 변수에 대해서만 예외 허용
    }]
  }
};

설정 설명

• 'off' : 이 규칙을 완전히 끕니다. (일반적으로 추천하지 않음)
• 'warn' 또는 'error'를 지정할 수 있고, 옵션으로 세부적으로 조정할 수 있습니다.
• allowUsingIterationVar 옵션을 켜면 반복변수(item)만 조건으로 사용할 경우 허용됩니다.

 

 

참고

https://eslint.vuejs.org/rules/no-use-v-if-with-v-for.html