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

【问题标题】：Recursion when pushing to Component Page Vue推送到组件页面 Vue 时的递归
【发布时间】：2021-09-12 14:45:34
【问题描述】：

我在尝试从我的布局推送到 Post 站点时遇到错误“InternalError: too much recursion”。

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'),

我的帖子页面：

<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 来搜索效果很好的帖子。现在我正在尝试将点击的帖子推送到动态生成的网站。

【问题讨论】：

标签： javascript vue.js vue-component vuex quasar-framework

【解决方案1】：

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

参见 Recursive Components（仍然适用于 Vue 3，即使它来自 Vue 2 文档）

【讨论】：

我删除了名称：'Post'，就像你说的那样，它修复了错误。非常感谢！