Javascript VueJS-在呈现子组件之前，在父组件中等待updated（）

我以为我把它弄破了。我正试图从URL查询中获取id，例如

http://localhost:8080/car?rec140ttKVWJCDr8v

，将其分配给局部变量，并将其与存储对象中的ID进行比较，以提取匹配节点并将其作为道具发送给子组件。除非我在孩子身上触发一个重新呈现的网页包，否则它永远不会到达孩子。它需要在页面刷新时到达那里

我认为这可能是一个重新渲染的问题，所以我尝试了随机子组件键，但没有成功。我也尝试过使用计算道具，但也有同样的问题。我觉得我错过了一些简单的事情

以下是控制台中的渲染顺序。最后一次父级更新是carsObject可用时，但在此之前子级已经创建并装载了两次。我不知道为什么

PARENT: created()= [__ob__: Observer]
CHILD: created()= {}
CHILD: mounted()= {}
PARENT: mounted()= [__ob__: Observer]
PARENT: updated()= [__ob__: Observer]
CHILD: created()= {}
CHILD: mounted()= {}
PARENT: updated()= [__ob__: Observer]
PARENT: updated()= (5) [{…}, {…}, {…}, {…}, {…}, __ob__: Observer] //here is when I want the child to render.

以下是组件：

// parent
<template>
  <div class="parent">
    // wait for childData to be ready before rendering
    <Child v-bind:data="childData" :key="carId" /> // random keys doesn't work either
  </div>
</template>
<script>
import Child from "@/components/Child";
import { mapState } from "vuex";

export default {
  name: "parent",
  components: {
    Child
  },
  computed: mapState(["carsObject"]), // cars object coming from store, available in updated()
  data() {
    return {
      carId: "",
      childData: {}
    };
  },
  updated() {
    this.childData = this.getCurrentChild();
  },
  methods: {
    getCurrentChild() {
      // get car id from URL
      let ref = location.href;
      let carId = ref.substring(ref.indexOf("?") + 1);
      if (this.carsObject) {
        this.carsObject.forEach(car => {
          if (car.car_id === carId) {
            return car;
          }
        });
      }
    }
  }
};
</script>

// child    
<template>
  <div class="child">
    // do stuff with "data" prop
  </div>
</template>    

//父对象
//请等待childData准备就绪，然后再进行渲染
//随机键也不起作用
从“@/components/Child”导入子项；
从“vuex”导入{mapState}；
导出默认值{
姓名：“家长”，
组成部分：{
小孩
},
计算：mapState（[“carsObject”]），//来自存储的cars对象，在更新（）中可用
数据（）{
返回{
龋齿：“，
childData:{}
};
},
更新的（）{
this.childData=this.getCurrentChild（）；
},
方法：{
getCurrentChild（）{
//从URL获取汽车id
设ref=location.href；
设carId=ref.substring（ref.indexOf（“？”）+1）；
如果（此.carsObject）{
this.carsObject.forEach（car=>{
如果（car.car_id===carId）{
返回车；
}
});
}
}
}
};
//孩子
//用“数据”道具做事

您的

getCurrentChild

方法没有返回任何内容；您是否打算使用

find

而不是

forEach

（假设

carsObject

是一个数组）

---

我也不知道你为什么要在

updated

hook中这样做，它似乎不是正确的位置。我几乎不需要使用

更新的
钩子。
像这样的客户端路由使用VueRouter吗？@Anatoly不知道你的意思。我正在对一个大型、复杂的Vue应用程序进行一些更新，我没有设计或构建这个应用程序。我只是想尽量避免重构。在
数据中添加一个标志，例如
loaded
，默认值为
false
，并在加载孩子数据后将其设置为
true
。使用它有条件地呈现组件，即

getCurrentChild() {
  // get car id from URL
  let ref = location.href;
  let carId = ref.substring(ref.indexOf("?") + 1);
  if (this.carsObject) {
    return this.carsObject.find(car => car.car_id === carId);
  }
}