javascript - 创建时无法在 vue js 组件中执行 .find() 循环

Question

我目前正在使用 Vue js 构建一个简单的应用程序（并在同一场合学习它）。

这是应用程序：https ://osr-app-2a8b6.web.app/

因此，当您在显示事件列表的主页上然后单击详细信息时，您最终会进入事件的单个页面，这非常有效，但是当您加载该单个页面而不导航到它时（只需重新加载页面），什么都没有显示，我有一个

Uncaught (in promise) TypeError: Cannot read property 'content' of undefined

我在导航时没有。

所以这是我的路由器代码：

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {name: 'home', path: '/', component: Home},
        {name: 'fav', path: '/favoris', component: FavoriteEvents},
        {name: 'single-event', path: '/:eventId', component: SingleEvent}
    ]
});

和我的组件：

<script>
    import SingleCta from './SingleCta.vue';
    import SingleHeader from './SingleHeader.vue';
    import PartnerList from './PartnerList.vue';
    import GalleryCarousel from './GalleryCarousel.vue';
    import TheProgram from './TheProgram.vue';
    import DropdownList from './DropdownList.vue';
    
    export default {
        components: {
            SingleCta,
            SingleHeader,
            PartnerList,
            GalleryCarousel,
            TheProgram,
            DropdownList,
        },
        data() {
            return {
                singleEvent: '',
                title: '',
                serieType: '',
                day: '',
                time: '',
                date: '',
                where: '',
                dropDowns: [],
                gallery: [],
                partners: [],
                people: [],
                program: '',
                description: '',
                adProgram: {},
                txtColor: '',
                bgColor: ''
            }
        },
        computed: {
            singleEventClass(){
                return 'page single-event ' + 'single-event--txt-' + this.txtColor + ' ' + 'single-event--bg-' + this.bgColor
            }
        },
        created() {
            const eventId = this.$route.params.eventId;
            const selectedEvent = this.$store.state.events.find(event => event.id === eventId);

            console.log(eventId) // return rhapsody-in-blue
            console.log(this.$store.state.events) // return my array with 3 events
            console.log(selectedEvent) // return undefined WHY???

            const selectedEventContent = selectedEvent.content;
            
            console.log(selectedEventContent) // return undefined WHY???

            this.singleEvent = selectedEvent;
            this.title = selectedEvent.title;
            this.serieType = selectedEvent.serieType;
            this.day = selectedEvent.day;
            this.date = selectedEvent.date;
            this.time = selectedEvent.time,
            this.where = selectedEvent.where,
            this.bgColor = selectedEvent.bgColor,
            this.txtColor = selectedEvent.txtColor,
            this.dropDowns = selectedEventContent.dropDowns;
            this.gallery = selectedEventContent.gallery
            this.partners = selectedEventContent.partners
            this.people = selectedEventContent.people
            this.program = selectedEventContent.program
            this.description = selectedEventContent.description
            this.adProgram = selectedEventContent.adProgram
        }
    }
</script>

问题似乎在这里：

const selectedEventContent = selectedEvent.content;

它返回我未定义：

TypeError: Cannot read property 'content' of undefined

但您可以在我记录 eventId 并返回正确的事件 ID 之前看到：

rhapsody-in-blue

我也在记录 this.$store.state.events

它返回我的事件数组：

Proxy {}
[[Handler]]: Object
[[Target]]: Array(3)
0: {bgColor: "pink", content: {…}, date: "30.09.20", day: "mercredi", id: "rhapsody-in-blue", …}
1: {bgColor: "pink", content: {…}, date: "23.09.21", day: "jeudi", id: "hommage-a-armin-jordan", …}
2: {bgColor: "black", content: {…}, date: "18.09.21", day: "samedi", id: "septembre-musical-montreux", …}
length: 3
[[Prototype]]: Array(0)
[[IsRevoked]]: false

那么为什么该数组上的 .find() 循环返回未定义？

同样在导航但不在加载时有效。

标签： javascriptloopsvue.jsvue-componentvue-router