기록

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 속성을 사용하여 필터링 된 데이터를 반환하도록 하는 것이 좋습니다..

modal창의 기본 틀을 만들어 두고 내용을 교체하는 코드 입니다. {{ contentsName }} OK Close component 태그와 defineAsyncComponent 그리고 computed 속성 내부에 있는 defineAsyncComponent는 동적으로 컴포넌트를 로드하고 내용을 교체하기 위한 Vue.js 3의 기능들입니다. 1. component 태그 이 부분은 Vue의 동적 컴포넌트를 나타내는 태그입니다. :is 속성을 사용하여 동적으로 로드되는 컴포넌트를 지정할 수 있습니다. 2. defineAsyncComponent return defineAsyncComponent(() => import('@/path/${this.contentsName}.vue')); defineAsyncComp..