推送到组件页面 Vue 时的递归

Question

我在尝试从我的布局推送到 Post 站点时遇到错误“InternalError：太多递归”。

代码Layout.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'),

我的 Post 页：

<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，用于搜索 posts，效果很好。现在，我正在尝试为 post 单击推送到动态生成的站点。

Answer 1

如果您删除 name: 'Post'（从导出默认值）会怎样？您设置的名称与组件标签名称匹配，因此会陷入无限渲染循环。

请参阅 Recursive Components（尽管它来自 Vue 2 文档，但仍然适用于 Vue 3）

推送到组件页面 Vue 时的递归

Recursion when pushing to Component Page Vue

javascript

vue.js

vue-component

vuex

quasar-framework