vuejs 两个组件都从 App.js 获取 prop，但是一个组件丢失了 prop 数据答案

【问题标题】：vuejs both components get prop from App.js, but one component lost prop datavuejs 两个组件都从 App.js 获取 prop，但是一个组件丢失了 prop 数据
【发布时间】：2021-08-09 09:40:24
【问题描述】：

当我在“ActorDetails.vue”页面/组件上刷新浏览器几次时，不经常但有时，我丢失了我的 actorsData 道具数据（应该有 5 个对象的数组但变成空数组），在首先，我认为这是API的问题，但是当我尝试console.log()“App.js”中的数据时，数据存在......我似乎找不到问题所在。（我也尝试过刷新当我在“ActorsList.vue”页面/组件上时浏览器几次，道具数据始终存在）

两个页面/组件（“ActorList.vue”和“ActorDetails.vue”）都从“App.vue”获取topActors数据。

（代码中的注释）

App.vue

<template>
  <div id="app">
    <router-view name="homePage" />
    <router-view :actorsData="topActors" /> <== "ActorList.vue" and "ActorDetails.vue" use this "router-view"
    <div class="over-limit-resolution">Over 4k</div>
  </div>
</template>

<script>
import { getActors } from "./util/TheMoveDatabase";
export default {
  name: "App",
  data() {
    return {
      topActors: [],
    };
  },
  created() {
    getActors.then((result) => {
      console.log(result); <== Data always came back from API even when my "actorsData" prop inside of "ActorsDetails.vue" lost it's data.
      this.topActors = result;
    });
  },
  methods: {},
};
</script>

ActorsList.vue

<template>
  <div class="actors-list">
    <router-link to="/">Home</router-link>

    <div class="actors-list-container" v-if="allFiveActors">
      <div
        class="actor-container"
        v-for="actorData in actorsData"
        :key="actorData.id"
      >
        <router-link :to="'/actorslist/' + actorData.id">
          <h3>{{ actorData.name }} | {{ actorData.id }}</h3>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ActorsList",
  props: ["actorsData"],
  data() {
    return {};
  },
  computed: {
    allFiveActors() {
      return this.actorsData.length > 0;
    },
  },
  created() {
    console.log(this.actorsData); <== Also tried to refresh the browser when I am on this page/component, prop data always exist.
  },
};

ActorsDetails.vue（丢失道具数据的页面/组件）

<template>
  <div class="actor-details">
    <router-link to="/actorslist">Actors List</router-link>
    <h1>Details page</h1>
    <div class="actor-details-container" v-if="actorDetails">
      <div class="actor-detail-info">
        <h3>{{ actorDetails.name }}</h3>
        <p>Birthday: {{ actorDetails.birthday }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getActorDetails } from "../util/TheMoveDatabase";
export default {
  name: "ActorDetails",
  props: ["actorsData", "actorId"],
  data() {
    return {
      actorDetails: {},
    };
  },
  methods: {
    checkCurrentActorExist() {
      const currentActor = this.getCurrentActor;
      // console.log(currentActor);
      if (!currentActor) {
        // this.$router.push("/");
        console.log("does not exist");
      }
    },

    getActor() {
      const currentActor = this.getCurrentActor;
      console.log(currentActor);
      console.log("RAN");

      if (currentActor) {
        getActorDetails(this.actorId).then((result) => {
          this.actorDetails = result;
          console.log(this.actorDetails);
        });
      }
    },
  },

  created() {
    this.checkCurrentActorExist();
    this.getActor();
    console.log(this.actorsData); <== When I am on this page/component and refresh the browser few times, sometimes my "actorsData" prop data is lost.
    console.log(this.actorId);
  },

  computed: {
    getCurrentActor() {
      return this.actorsData.find(
        (actor) => actor.id === parseInt(this.actorId)
      );
    },
  },
};
</script>

Routes.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'Home',
        components: {
            homePage: Home,
        },
    },
    {
        path: '/actorslist',
        name: 'ActorsList',
        component: () => import('../views/ActorsList.vue'),
    },
    {
        path: '/actorslist/:actorId',
        name: 'ActorDetails',
        component: () => import('../views/ActorDetails.vue'),
        props(route) {
            // console.log(route);
            return {
                actorId: route.params.actorId,
            };
        },
    },
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
});

export default router;

【问题讨论】：

请定义“丢失”。
数组中应该有5个对象，但变成空数组。（有问题更新）

标签： javascript vue.js vue-component

【解决方案1】：

只是一个猜测，但也许您的加载方法有时需要很长时间，并且空数组已经传递给组件。我会尝试清除数组并用加载的数据重新填充它，而不是创建一个新数组（我会尝试使用splice 或pop 清空它，然后用push 重新填充它）

【讨论】：