CODEWITHSUNDEEP
vue.js
Ismoil Shifoev
Ismoil Shifoev

Reputation: 6001

Enzyme computed Error - TypeError: Cannot read property 'find' of undefined

There is an error

Vue warn]: Error in render: "TypeError: Cannot read property 'find' of undefined"

when I tested my vue component. I tried different methods but still got an undefined error. When I load All meetups it is working fine. But the problem when I would like to get a signle event

store.js

state: {
    loadMeetups :[
        { 
            imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/4/47/New_york_times_square-terabass.jpg', 
            id: 'afajfjadjaaadja323',
             title: 'Meetup in New York' ,
             date:'2018-07-17'

        },
        { 
            imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/1/14/Palais_de_Justice_%28Paris%29_June_2010.jpg', 
            id: 'aadsfhbkhlk1241',
             title: 'Meetup in Paris',
             date:'2018-07-19'
        }
    ],
    user: {
        id: 'afajfjadjaaadja323',
        registeredMeetups: ['aadsfhbkhlk1241']
    }
}

Meeetup.vue

<template>
    <v-container>
        <v-layout row wrap="">
            <v-flex xs12>
              <v-card>
                  <v-card-title>
                      <h3 class="primary--text">{{ meetup.id }}</h3>
                  </v-card-title>
                  <v-card-media
                     src="https://upload.wikimedia.org/wikipedia/commons/4/47/New_york_times_square-terabass.jpg"
                                 height="400px"
                  >

                  </v-card-media>
                  <v-card-text>
                      <div class="info--text">17th July 2017 - Where it takes place</div>
                      <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
                  </v-card-text>
                  <v-card-actions>
                      <v-spacer></v-spacer>
                      <v-btn class="red darken-1" dark="">Register</v-btn>
                  </v-card-actions>
              </v-card>
            </v-flex>
        </v-layout>
    </v-container>
</template>
<script>
export default {
    props: {
    id:String
  },
    computed:{
        meetup(){
            return this.$store.getters.loadedMeetup(this.id)
        }
    }
}
</script>

Upvotes: 0

Views: 341

Answers (1)

Ismoil Shifoev
Ismoil Shifoev

Reputation: 6001

Method has to go into a getter. So once I have defined the getter, then I can use it any component in your project under, this.$store.getters. This is working with right syntax working!!

https://vuex.vuejs.org/guide/getters.html

loadedMeetup: state => (id) => {
        return state.loadedMeetups.find(meetup => meetup.id === id)
      }

Upvotes: 1

Related Questions