Почему не получается передать данные в компонент Vue?

Question

[woneorb]

Ситуация такая: динамическая страница, у которой есть компонент Channel
Сначала должен произойти запрос о странице, и только потом о Channel
В запрос о Channel передается параметр, который получает из данных страницы

Проблема в том, что Channel делает запрос, но не получает этого параметра, а получает только когда делаю какое-то изменение в коде, и даже не понимаю сути проблемы - ПОЧЕМУ channel ГРУЗИТЬСЯ РАНЬШЕ СТРАНИЦЫ?

Или как сделать, чтобы рендер CHANNEL происходил, когда страница полностью готова, и все ее данные уже хранились
(использую VUEX)

Или еще какой то вариант, потому что совсем не понимаю, в чем вообще проблема

export default {
  components: {
    channel,
  },
  props: ["page_id"],
  computed: {
    ...mapState({}),
    ...mapGetters([
      "PAGE_TITLE",
      "PAGE_META",
    ]),
  },
  methods: {
    ...mapMutations([]),
    ...mapActions([
      "FETCH_PAGE",
      "FETCH_CHANNEL",
    ]),

    rebootFETCH_PAGE() {
      this.FETCH_PAGE(this.page_id);
  },
  },
  created() {
    this.FETCH_PAGE(this.page_id);
  },
  mounted() {
    this.FETCH_CHANNEL(this.PAGE_META.Channel)
  },
  watch: {
    $route: "rebootFETCH_PAGE",
  },
};

Comments

[WapSter]

Асинхронность подучи

Answer 1

[Kairat S.]

Есть такой вариант:
Сделать пропсу channel значение по умолчанию, и проверять его вотчером. Если значение изменилось, то только тогда делать запрос.

Либо можно создать поле ready по умолчанию = false, и показывать компонент только когда ready === true.
А на true он будет меняться после запроса: Если запрос делается axios-ом, то в then.

Comments

[woneorb]

fetch, но смысл тот же, спасибо
Но как мне влиять на этот ready, в какой момент страницы: created, mounted, update? мне менять этот параметр

[Kairat S.]

Попробуй переписать FETCH_PAGE на промисы.

FETCH_PAGE () {
  return new Promise (resolve, reject) {
      // делаешь запрос страницы, если все окей, вызываешь resolve()
  }
}

Затем в любом хуке делаешь:

this.FETCH_PAGE(this.page_id).then(()=> {
       // resolve, который ты вызвал выше это то что будет выполняться тут.
       // то есть точно после запроса страницы.
      this.FETCH_CHANNEL(this.PAGE_META.Channel)
   })

Answer 2

[marsdenden]

Я в таких случаях делаю просто - переменная, куда получаем данные для компонента по умолчанию null и компонент оборачиваю в div c v-if="abc!==null". Все. Как только загрузились данные с сервера - так и отрендерился компонент

Answer 3

[Kitta]

Страница такой же компонент как и любой другой, а насколько я помню компоненты собираются от дочерних к родителю.

В вашем случае, как мне кажется, стоит просто правильно встроить поток данных используя реактивность - т.е. представление компонента должно реактивно зависеть от параметров (либо напрямую от параметра, либо через вычислимое поле (computed), либо через наблюдение (watcher). И тогда будет не так важно в какой момент придут входные данные - как придут, так компонент сам перерисуется.

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