즐기는자를 이길자 없다
138
2021-10-26 13:42:47
7
236

vue v-for 문 속 v-if 내 함수 무한 루프 문제



v-for 문 내부에 td 속성에 v-if 문 함수를 호출하는것이 1300번 이상 호출되네요. 

v-if="test()>0" 을 지우면 getrownum이 13번 호출되는 것을 볼 수 있는데 이렇게 호출되어야 정상인데 v-for문이 100번 이상 반복하는 이유가 무엇인가요??

아래 글은 경고문입니다. 

runtime-core.esm-bundler.js:6873 [Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function. 


0
  • 답변 7

  • 마린_7
    320
    2021-10-26 14:18:55

    return 2 라서요...

  • rezigrene
    1k
    2021-10-26 14:58:49
    this.sum+=1; 
    을 주석처리해도 동일한가요?
  • 즐기는자를 이길자 없다
    138
    2021-10-26 15:02:26

    @rezigrene this.sum+=1;  주석 처리하니깐 정상적으로 실행되네요.. 그 이유가 무엇일까요?

  • rezigrene
    1k
    2021-10-26 15:09:18

    어디선가 this.sum을 이용해서 화면에 표시하는 부분이 있겠죠. 그래서 this.sum이 변할때마다 v-if도 다시그려지는 것일테구요.

  • 즐기는자를 이길자 없다
    138
    2021-10-26 15:25:40

    @rezigrene sum 변수는 data() 함수에 처음 선언하고 test 함수에서밖에 사용하지 않았는데도 다른 부분에 표시하는 부분은 없습니다. 

     <td v-if="test()>0">

    아니면 이 부분이 문제인건가요?

  • rezigrene
    1k
    2021-10-26 15:45:29 작성 2021-10-26 15:47:22 수정됨

    음. 실험해보니 그것때문이 맞는듯합니다. 

    화면 표시할때 test() 에서

    this.sum에 접근하니 this.sum 이 변할때마다 다시그려주는듯하네요..

  • 즐기는자를 이길자 없다
    138
    2021-10-26 16:03:39

    @rezigrene 오호 그렇다면 화면 표시(v-if, v-for, v-show) 할때 포함되는 함수에선 자바스크립트 변수 값을 바꾸면 안되는거죠?

  • 로그인을 하시면 답변을 등록할 수 있습니다.