Возвращает Nuxt JS и WordPress API. Невозможно прочитать свойство "title" неопределенного значения

Я создаю веб-сайт, используя WordPress API для внутреннего интерфейса и nuxt.js для внешнего интерфейса. У меня возникают проблемы с отображением данных в моем интерфейсе, хотя я продолжаю получать Cannot read property 'title' of undefined

Ниже мой store / index.js

import axios from 'axios'

export const state = () => ({
    posts: [],
    pages: [],
})

export const mutations = {
    SET_POSTS: (state, posts) => {
        state.posts = posts
    },
    SET_PAGES: (state, pages) => {
        state.pages = pages
    },
}

export const actions = {
    
    async getPages({ state, commit }) {

        if (state.pages.length) return
        
        try {
            let pages = await axios.get(`https://domain.dev/wp-json/wp/v2/pages`).then((res) => res.data)

            pages = pages.map(({ id, slug, title, content, acf }) => ({ id, slug, title, content, acf }))

            commit('SET_PAGES', pages)
            
        } catch (err) {
            console.error('getPages', err)
        }

    },

    async getPosts({ state, commit }) {
        
        if (state.posts.length) return
        
        try {
            
            let posts = await axios.get(`https://domain.dev/wp-json/wp/v2/posts?page=1&per_page=100&_embed=1`).then((res) => res.data)

            posts = posts.map(({ id, slug, title, content, excerpt, acf }) => ({ id, slug, title, content, excerpt, acf }))
            
            commit('SET_POSTS', posts)
 
        } catch (err) {
            console.error('getPosts', err)
        }
    }
}

Мой шаблон представления About.vue выглядит так

<template>
    <div>
        <h1>{{ about.title.rendered }}</h1>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'
    
    export default {

        name: 'About',

        computed: {
            ...mapState(['pages']),

            about() {
                return this.pages.find(
                    (page) => page.slug === 'about'
                )
            },

        },
        
        created() {
            this.getPages()
        },

        methods: {
            ...mapActions(['getPages'])
        },
    }
</script>

<style lang="scss" scoped>

</style>

Я изменил URL-адрес API здесь, но он отображает данные, которые можно увидеть здесь

{
"id": 17,
"date": "2020-12-18T11:36:21",
"date_gmt": "2020-12-18T11:36:21",
"guid": {
"rendered": "https://domain.dev/?page_id=17"
},
"modified": "2020-12-18T11:36:42",
"modified_gmt": "2020-12-18T11:36:42",
"slug": "about",
"status": "publish",
"type": "page",
"link": "https://domain.dev/about/",
"title": {
"rendered": "About"
},
"content": {
"rendered": "<p>Nothing much to say!</p>\n",
"protected": false
},
"excerpt": {
"rendered": "<p>Nothing much to say!</p>\n",
"protected": false
},
"author": 1,
"featured_media": 0,
"parent": 0,
"menu_order": 20,
"comment_status": "closed",
"ping_status": "closed",
"template": "",
"meta": [],
"acf": [],

javascript wordpress vue.js nuxt.js wp-api
person CIB    schedule 21.12.2020    source источник
comment
У вас есть about.title.rendered в вашем шаблоне, и about, если undefined вызовет именно эту ошибку.   -  person Chris G    schedule 21.12.2020
comment
@ChrisG Я понимаю, что about не определено, я просто не понимаю, как я это определяю?   -  person CIB    schedule 21.12.2020
comment
@ChrisG также только что заметил, если я перейду на свою домашнюю страницу / затем вернусь к about / about заголовок страницы загружается, только когда я обновляю страницу, я получаю неопределенную ошибку   -  person CIB    schedule 21.12.2020
comment
У меня была аналогичная проблема, в ответе axios было все под .data. вы пробовали войти data.title?   -  person Toni Michel Caubet    schedule 21.12.2020
comment
@ToniMichelCaubet created() { this.getPages() console.log(data.title) }, возвращает данные не определены   -  person CIB    schedule 21.12.2020
comment
Эти запросы являются асинхронными, но ваш шаблон не подготовлен к тому, что pages будет пустым и about() поэтому еще ничего не найдет. Попробуйте что-нибудь вроде {{ about && about.title.rendered }}   -  person Chris G    schedule 21.12.2020
comment
@CIB Я имею в виду что-то вроде about.data.title   -  person Toni Michel Caubet    schedule 22.12.2020

Ответы (1)


arrow_upward
2
arrow_downward

Используйте computed по умолчанию для пустой строки, когда about или about.title являются ложными:

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

computed: {
  title() {
    return this.about?.title?.rendered || ''
  }
}

Здесь вы должны использовать вычисленный, потому что по какой-то причине Vue, похоже, в настоящее время не поддерживает необязательное связывание в <template>s, но оно правильно передается при использовании в компоненте.

Очевидно, вы можете заменить '' на то, что хотите отобразить, когда в компоненте нет about или about.title (например: '--', '...' и т. Д.).

person tao    schedule 24.12.2020