IT이야기

구성 요소 페이지 Vue로 푸시할 때 재귀 발생

cyworld 2022. 6. 17. 21:49
반응형

구성 요소 페이지 Vue로 푸시할 때 재귀 발생

레이아웃에서 Post 사이트로 푸시하려고 하면 "InternalError: too much recursion" 오류가 발생합니다.

레이아웃 코드vue:

watch(searchText, (newValue, oldValue) => {
  log('Current State of SearchText', newValue);
  if (newValue !== null) {
    if (newValue.value !== undefined) {
      let id = newValue.value;
      // push to post with id
      router.push(`/post/${id}`);
    } else {
      // todo: start search
    }
  }
});

QSelect 모델 값이 변경될 때 시계를 사용하여 반응합니다.

내 경로:

{ path: '/post/:id', component: () => import('pages/Post.vue'),

내 포스트 페이지:

<template>
  <q-page class=""> 
    <Post // I'm getting no error when deleting this Component
      :description="post.description"
      :title="post.title"
      :author="post.user"
      :date="post.date"
      :tags="post.tags"
      :commentArray="post.comments"
    /> 
    <h1>
      Test
    </h1>
  </q-page>
</template>

<script>
import Post from 'src/components/PostComp.vue';
import { useRouter, useGetters, useActions } from '@u3u/vue-hooks';
import { ref } from '@vue/composition-api';
import moment from 'moment';

const debug = require('debug');

const log = debug('app:PostPage');

export default {
  name: 'Post',
  components: {
    Post,
  },
  setup() {
    const { route } = useRouter();
    const post = ref({});

    const getters = {
      ...useGetters('post', ['post']),
    };
    const actions = {
      ...useActions('post', ['findAll']),
    };

      log('params:', route.value.params);

     const p1 = getters.post.value(route.value.params.id);

      post.value = {
        title: p1[0].title,
        user: 'Mary Sullyman',
        description: p1[0].description,
        tags: p1[0].postTags,
        comments: p1[0].commentDTOList,
        date: moment(p1[0].createdDate).format('DD.MM.YYYY HH:mm') + ' Uhr',
      }; 

      log(post);

제가 하려는 일: 툴바에 QSelect가 있어 정상적으로 동작하는 투고를 검색할 수 있습니다.이제 클릭된 게시물을 위해 동적으로 생성된 사이트로 푸시하려고 합니다.

를 삭제하면 어떻게 됩니까?name: 'Post'(export default에서)설정한 이름이 구성 요소 태그 이름과 일치하므로 무한 렌더 루프가 됩니다.

'재귀 컴포넌트' 참조(Vue 2 문서에서도 Vue 3에 적용됨)

언급URL : https://stackoverflow.com/questions/68194809/recursion-when-pushing-to-component-page-vue

반응형