Vue 데이터가 없을 경우 computed 처리

데이터가 없을 경우 computed 속성 처리

//1.
directors() {
	return this.movieData.crew.filter((crew) => crew.job === "Director");
},

//2.
directors() {
	return this.movieData.crew
		? this.movieData.crew.filter((crew) => crew.job === "Director")
		: [];
},

1번 코드로 작성 시 최초 컴포넌트가 생성될 때 filter를 적용할 수 없다는 에러가 발생한다. 왜냐하면 처음 컴포넌트 생성시 this.movieData는 빈 객체이므로, movieData안에 crew 프로퍼티가 undefined 상태이기 때문이다.
따라서, 삼항 연산자를 이용해서 this.movieData에 crew 프로퍼티가 있을 경우에만 filter된 배열을 리턴하도록 2번 코드처럼 변경해야한다.