Передача значения isLoading моему компоненту в приложении nuxtjs - PullRequest
0 голосов
/ 02 июля 2018

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

На моей странице у меня есть

async asyncData ({ params, store, isLoading=true}) {
    const thisCaseId = store.dispatch('cases/getCase', params.caseId ); 
      isLoading = false
    return { thisCaseId, isLoading}
  }, 

Ведение журнала консоли подтверждает, что isLoading действительно изменяется с True на false

Я думал, что смогу передать это компоненту через опору следующим образом

<case-summary  :isLoading='isLoading' :caseId='caseId'></case-summary>

и затем используйте v-if на контейнере

<section class="case-summary-container" v-if="!isLoading">

Но это не работает, хотя значение isLoading, похоже, передается дочернему компоненту через подпорку, как и ожидалось, и работает, просто не ждет рендеринга.

Я также пытался использовать то же самое на элементе страницы перед рендерингом компонента

 <b-card v-if="isLoading">
            <h2>Loading ...</h2>
        </b-card>

        <b-card v-if="!isLoading">
          <case-summary  :caseId='caseId'></case-summary>
        </b-card>

но это тоже не сработало.

Может кто-нибудь объяснить мне, пожалуйста, и что мне нужно сделать, чтобы сделать эту работу, так как я все еще в обоих случаях получаю то мерцание, где предыдущая запись отображается перед повторным рендерингом новых результатов (что я и пытаюсь остановка)

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

В основном я хочу отложить загрузку компонента до тех пор, пока его не заполнят новые данные

мои действия в моем магазине следующие:

getCase ({ commit, context }, data) {
    return new Promise ((reject) => {
      this.$axios.get('/cases/' + data + '.json')
    .then(res => {
      const obj = {};
        Object.assign(obj, res.data);
        commit('GET_CASE', obj)
      })
      .catch(e => {
        context.error(e)
        reject('/cases/')
        this.loading = false
      })
    })
  }, 

Большое спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...