VueJS - дождитесь обновления () в родительском перед рендерингом дочернего компонента - PullRequest
Новая
       14

VueJS - дождитесь обновления () в родительском перед рендерингом дочернего компонента

0 голосов
/ 05 мая 2020

Я думал, что это треснуло. Я пытаюсь получить идентификатор из URL-запроса, например http://localhost:8080/car?rec140ttKVWJCDr8v, назначить его локальной переменной и сравнить его с идентификаторами в объекте хранилища, чтобы извлечь соответствующий узел и отправить его в дочерний компонент в качестве опоры. Он просто никогда не дойдет до дочернего элемента, если я не запустил повторный рендеринг веб-пакета в самом потомке. Это нужно сделать на странице refre sh.

Я подумал, что это может быть проблема повторного рендеринга, поэтому я пробовал случайные ключи дочерних компонентов, но это не сработало. Я также пробовал использовать вычисляемую опору, но имел ту же проблему. Кажется, мне не хватает чего-то простого.

Вот порядок рендеринга в консоли. Самое последнее родительское обновление - это когда 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>

1 Ответ

1 голос
/ 05 мая 2020

Ваш getCurrentChild метод ничего не возвращает; Вы хотели использовать find вместо forEach (при условии, что carsObject - это массив)? 

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);
  }
}

Также я не уверен, почему вы делаете это в хуке updated , похоже, это неправильное место. Мне почти никогда не нужно использовать крючок updated.

...