Может кто-нибудь помочь с этим, я пытаюсь не визуализировать компонент, пока данные не загрузились
На моей странице у меня есть
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
})
})
},
Большое спасибо