[vue3] v-for, v-if 같이 사용(computed/watch)

 Vue.js 2.3 버전부터는 v-for와 v-if를 함께 사용할 수 있도록 v-for 디렉티브에 v-if를 추가할 수 있는 기능이 추가되었습니다. 따라서 Vue.js 2.3 이상의 버전에서는 v-for와 v-if를 함께 사용하는 것이 가능합니다.

 

하지만 Vue.js에서는 v-for와 v-if를 함께 사용하는 것은 좋지 않습니다. 이유는 v-for 디렉티브가 먼저 수행되고, 그 후에 v-if 디렉티브가 실행되기 때문입니다. 이로 인해 원하지 않는 결과를 가져올 수 있습니다.

 

computed

v-for와 v-if를 함께 사용하려면 주의가 필요합니다. 만약 v-if를 사용하여 데이터를 필터링하려면, v-for를 사용하는 대신에 computed 속성을 사용하여 필터링 된 데이터를 반환하도록 하는 것이 좋습니다. 이렇게 하면 코드의 가독성이 향상되고, 성능에도 이점이 있습니다.

예를 들어, 다음과 같이 computed 속성을 사용하여 데이터를 필터링 할 수 있습니다.

<template>
  <div v-for="(param, index) in filteredParams" :key="index">
    {{ param }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        outputParameters: [
          { name: "param1", Actived: "Y" },
          { name: "param2", Actived: "N" },
          { name: "param3", Actived: "Y" },
          { name: "param4", Actived: "N" },
        ],
      },
    };
  },
  computed: {
    filteredParams() {
      return this.data.outputParameters.filter((param) => param.Actived === "Y");
    },
  }
};
</script>

Vue.js의 computed 속성은 해당 속성에 의존하는 reactive한 데이터가 변경될 때마다 다시 계산됩니다. 따라서, computed 속성 내에서 참조하는 this.data.outputParameters 값이 변경될 때마다 filteredParams가 다시 계산됩니다.

 

Watch

만약 this.data.outputParameters를 직접 변경하는 경우에는 filteredParams가 자동으로 다시 계산되지 않습니다. 이 경우, watch 속성을 사용하여 this.data.outputParameters를 감시하고, 변경될 때마다 filteredParams를 다시 계산할 수 있습니다.

<template>
  <div v-for="(param, index) in filteredParams" :key="index">
    {{ param }}
  </div>
</template>
import { watchEffect } from 'vue';
<script>
export default {
  data() {
    return {
      data: {
        outputParameters: [
          { name: "param1", Actived: "Y" },
          { name: "param2", Actived: "N" },
          { name: "param3", Actived: "Y" },
          { name: "param4", Actived: "N" },
        ],
      },
    };
  },
  mounted() {
    watchEffect(() => {
      this.filteredOutputParameters = this.data.outputParameters.filter(param => param.Actived === 'Y');
    });
  }
};
</script>

 

* computed watch 차이, 데이터 변경 방식

https://sumni.tistory.com/129