Блог

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

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

 <template>
      <div class="row m-0 p-0" v-show="forumCategories.length amp;amp; 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  amp;amp; isPageLoaded" style="border: 2px dotted red;">
  

если удалить 2-е условие amp;amp; isPageLoaded в строке выше, я вижу содержимое.

Но похоже, что var isPageLoaded не реагирует, и я не понимаю, почему? If объявляется с помощью ref и объявляется взамен метода setup . Но похоже, что, когда я изменяю его в методе loadForums, он не работает в шаблоне… Спасибо!

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

 isPageLoaded = true // ❌  no longer a ref
  

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

 const isPageLoaded = ref(false)
isPageLoaded.value = true // ✅