Почему содержимое дочернего компонента с props не отображается на странице?

В приложении vuejs3 я читаю данные с помощью запроса axios из backend API. Я вижу, что данные передаются внутреннему компоненту, но я не вижу, чтобы содержимое дочернего компонента отображалось на странице.

Родительский компонент:

<template>
      <div class="row m-0 p-0" v-show="forumCategories.length && isPageLoaded">
        <div v-for="(nextActiveForumCategory, index) in forumCategories" :key="nextActiveForumCategory.id" class="col-sm-12 col-md-6 p-2 m-0">
          index::{{ index}}
          <forum-category-block
            :currentLoggedUser="currentLoggedUser"
            :nextActiveForumCategory="nextActiveForumCategory"
            :index="index"
            :is_show_location="true"
          ></forum-category-block>
        </div>
      </div>
</template>

<script>
  import ForumCategoryBlock from '@/views/forum/ForumCategoryBlock.vue'
  import { useStore } from 'vuex'

  export default {
    
    name: 'forumsByCategoryPage',

    components: {
      ForumCategoryBlock,
    },

    setup () {
      const store = useStore()
      const orderBy = ref('created_at')
      const orderDirection = ref('desc')

      const forumsPerPage = ref(20)
      const currentPage = ref(1)
      let forumsTotalCount = ref(0)
      let forumCategories = ref([])
      let isPageLoaded = ref(false)
      let credentialsConfig = settingCredentialsConfig

      const currentLoggedUserToken = computed(
        () => {
          return store.getters.token
        }
      )

      const currentLoggedUser = computed(
        () => {
          return store.getters.user
        }
      )
      
      const forumsByCategoryPageInit = async () => {
        loadForums()
      }
      
      function loadForums() {
        isPageLoaded = false
        let credentials = getClone(credentialsConfig)
        credentials.headers.Authorization = 'Bearer ' + currentLoggedUserToken.value
        let filters = { current_page: currentPage.value, order_by: orderBy.value, order_direction: orderDirection.value }
        const apiUrl = process.env.VUE_APP_API_URL

        axios.get(apiUrl + '/forums-by-category', filters, credentials)
          .then(({ data }) => {
            console.log('/forums-by-category data::')
            console.log(data)

            forumCategories.value = data.forumCategories
            forumsTotalCount.value = data.forumsTotalCount
            isPageLoaded = true
            console.log('++forumCategories::')
            console.log(forumCategories)
          })
          .catch(error => {
            console.error(error)
            isPageLoaded = true
          })
      } // loadForums() {

      onMounted(forumsByCategoryPageInit)
      
      return {
        currentPage, orderBy, orderDirection, isPageLoaded, loadForums, forumCategories, getHeaderIcon, pluralize, forumsTotalCount, forumCategoriesTitle, currentLoggedUser
      }
    } // setup
</script>

и ForumCategoryBlock.vue:

<template>
  <div class="">
    <h1>INSIDE</h1>
    <fieldset class="bordered" >
      <legend class="blocks">Block</legend>
      nextActiveForumCategory::{{ nextActiveForumCategory}}<br>
      currentLoggedUser::{{ currentLoggedUser}}<br>
      index::{{ index }}<br>
    </fieldset>
  
  </div>
</template>

<script>
  import { computed } from 'vue'
  export default {
    name: 'forumCategoryBlock',

    props: {
      currentLoggedUser: {
        type: Object,
        default: () => {}
      },
      nextActiveForumCategory: {
        type: Object,
        default: () => {}
      },
      index: {
        type: Number,
        default: () => {}
      }
    },

    setup (props) {
      console.log('setup props::')
      console.log(props)
      const nextActiveForumCategory = computed({
        get: () => props.value.nextActiveForumCategory
      })
      const currentLoggedUser = computed({
        get: () => props.value.currentLoggedUser
      })
      const index = computed({
        get: () => props.index
      })
      return { /* currentLoggedUser, nextActiveForumCategory, index */ }
    }

  }
</script>

Что я вижу в браузере: https://prnt.sc/vh7db9

Что не так и как это исправить?

ИЗМЕНЕНО: Я понял, ГДЕ ошибка:

  <div class="row m-0 p-0" v-show="forumCategories.length  && isPageLoaded" style="border: 2px dotted red;">

если убрать 2-е условие && isPageLoaded в строке выше, я вижу контент.

Но похоже, что var isPageLoaded не является реактивным, и я не понимаю, почему? Если объявляется с ref и объявляется в ответ на метод настройки. Но похоже, что когда я модифицирую его в методе loadForums, он не работает в шаблоне ... Спасибо!


person mstdmstd    schedule 11.11.2020    source источник


Ответы (1)


isPageLoaded теряет свою реактивность, потому что loadForums() меняет свой тип с ref на Boolean:

isPageLoaded = true // ❌  no longer a ref

isPageLoaded - это ref, поэтому ваш код должен получать к нему доступ через value собственности. Вероятно, лучше использовать здесь const вместо let, чтобы избежать этой ошибки:

const isPageLoaded = ref(false)
isPageLoaded.value = true // ✅
person tony19    schedule 12.12.2020