【问题标题】:Enzyme computed Error - TypeError: Cannot read property 'find' of undefined酶计算错误 - 类型错误:无法读取未定义的属性“查找”
【发布时间】:2019-02-16 04:34:04
【问题描述】:

有一个错误

Vue 警告]:渲染错误:“TypeError: Cannot read property 'find' of undefined”

当我测试我的 vue 组件时。我尝试了不同的方法,但仍然出现未定义的错误。当我加载所有聚会时,它工作正常。但是当我想获得一个signle事件时的问题

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>

【问题讨论】:

    标签: vue.js


    【解决方案1】:

    方法必须进入 getter。所以一旦我定义了 getter,我就可以在你的项目中使用它,this.$store.getters 下的任何组件。这是使用正确的语法工作!

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

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

    【讨论】:

      猜你喜欢
      • 2020-03-28
      • 1970-01-01
      • 2018-04-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-06-03
      • 2021-12-03
      相关资源
      最近更新 更多