'공통 컴포넌트 구현(2) - computed 속성' 영상에서 질... - 인프런

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

'공통 컴포넌트 구현(2) - computed 속성' 영상에서 질문 있습니다.

작성

627

<script>
export default {
  created() {
     const name = this.$route.name;
        if (name === 'news') {
          this.$store.dispatch('FETCH_NEWS');
        } else if (name=== 'ask') {
            this.$store.dispatch('FETCH_ASK');
        } else if (name === 'jobs') {
            this.$store.dispatch('FETCH_JOBS');
        }
  },
  computed: {
      listItmes() {
          const name = this.$route.name;
          if (name === 'news') {
              return this.$store.state.news;
            } else if (name === 'ask') {
                return this.$store.state.ask;
            } else if (name === 'jobs') {
                return this.$store.state.jobs;
            }
        }
    }
}
</script>

강의 내용과 똑같이 작성했습니다. 아무리 봐도 강의와 틀린점이 뭔지 모르겠는데.. (components/ListItem.vue)

36:16 error Expected to return a value in "listItmes" computed property vue/return-in-computed-property

✖ 1 problem (1 error, 0 warnings)

이런 에러가 발생하는데 에러 자체가 무슨 늬앙스인지는 알겠는데 도대체 어디서 뭐가 틀렸는지 모르겠습니다.

정확히 어떤 에러인지? 왜 발생했는지 알 수 있을까요 ㅠㅠ

몇시간넘게 여기서 헤메고있고.. 다음 진도를 못나가고 있습니다.

javascript vuejs

답변 3

장기효(캡틴판교)

지식공유자

안녕하세요 인혁님, 제가 질문 확인이 늦어져서 죄송합니다 :)

질문하신 내용을 보니 ESLint 관련해서 궁금하신거 같아요. computed 속성은 기본적으로 항상 리턴 값이 있어야 하는데 위에 작성하신 코드를 보면 if 문 분기를 타지 않는 경우 return 값이 없어서 ESLint에서 주의하라고 에러를 알려주고 있습니다. 해당 부분은 추후 오류가 덜 나는 방향으로 ESLint가 문법을 제시하고 있는 것이니 참고해서 수정하시면 좋을 것 같아요 :)

수강해 주셔서 감사합니다 :)

박인혁

질문자

ListItem.vue에서

export default {
  /* eslint-disable */
  created() {
    // console.log(this.$route.name)
    const name = this.$route.name;
        if (name === 'news') {
          this.$store.dispatch('FETCH_NEWS');
        } else if (name=== 'ask') {
            this.$store.dispatch('FETCH_ASK');
        } else if (name === 'jobs') {
            this.$store.dispatch('FETCH_JOBS');
        }
    console.log(this.$store.state.news)
   },

검색해보니 eslint를 끄면 된다는 게시글이 있어서 이런식으로 eslint를 껏더니 에러가 안뜨네요.

근데 대체 왜 뜨는 에러인지 근본적인 이유를 알고싶습니다 ㅠㅠ

박인혁

질문자

created() {
    // console.log(this.$route.name)
    const name = this.$route.name;
        if (name === 'news') {
          this.$store.dispatch('FETCH_NEWS');
        } else if (name=== 'ask') {
            this.$store.dispatch('FETCH_ASK');
        } else if (name === 'jobs') {
            this.$store.dispatch('FETCH_JOBS');
        }
    console.log(this.$store.state.news)
   },

이런 식으로 콘솔에서 this.$store.state.news를 확인하는 코드를 추가했습니다.

news페이지에서

콘솔에서 this.$store.state.news를 확인해봤는데 길이가 0이라고 나오는데.. 뭐가 잘못된건지 모르겠네요ㅠㅠ

인프런 커뮤니티 질문&답변

'공통 컴포넌트 구현(2) - computed 속성' 영상에서 질문 있습니다.