v-for와 v-if 분리하는 방법

현재 공부 중인 프로젝트를 싱글 파일 컴포넌트 체계로 바꾸기 위해서 .vue 파일로 프로젝트를 구성하고 있었습니다.

 

<tr v-for="emp in emps" v-if="emp.name.includes(name)">
          <td>{{emp.id}}</td>
          <td>{{emp.name}}</td>
          <td>{{emp.dept_name}}</td>
          <td>{{emp.title}}</td>
          <td>{{emp.salary}}</td>
        </tr>

해당 코드는 직원들의 정보를 가진 emps배열에서 emp.name이 name을 포함하는 직원만 출력하는 코드입니다.

 

해당 코드를 .vue파일로 그대로 옮기니 v-if와 v-for를 같이 쓸 수 없다는 오류가 생겼습니다.

 

Vue.js 문서와 stackoverflow에서 검색한 결과 Computed Properties를 사용하라는 결론을 얻었습니다.

 

 

해결 방법

---

computed: {
        sameName: function () {
          return this.emps.filter(i => i.name.includes(this.name))
        }
      },

먼저, emps 배열에서 조건에 해당하는 원소들만 필터링하는 함수를 생성합니다.

 

<tr v-for="emp in sameName" v-bind:key="emp.id">
                      <td>{{emp.id}}</td>
                      <td>{{emp.name}}</td>
                      <td>{{emp.dept_name}}</td>
                      <td>{{emp.title}}</td>
                      <td>{{emp.salary}}</td>
                  </tr>

그다음, sameName 함수를 통해 필터링된 배열만 출력합니다.

 

더 자세하고 공부하고 싶으시면 Vue.js 문서와 stackoverflow를 참고하시면 좋습니다.