TypeError: Cannot read property '_wrapper' of undefined

Question

I am trying to update the props data sent to a component on a button click to a single component in vue.

Button click triggers an action loads the data from a config. But this throws the error and the error message was not clear. Find the error here https://imgur.com/a/0psUWKr

If I pass the data directly without the button actions, it works fine.

My Main component


<template>
  <div>
    <MyList v-if="listItems" :elements="listItems"/>
    <button @click="showSlider">Show Slider</button>
  </div>
</template>

<script>
// imports the components and config files

export default {
  name: "ListView",
  data() {
    return {
      listItems: []
    };
  },
  components: {
    MyList
  },
  methods: {
    showSlider: function() {
         this.listItems.push(configs['elements'])
    },
</script>

NOTE: If i provide the data to listItems by default it works

And MyList file


<template>
  <ul>
    <li v-for="each in elements" :key="each.id">
      {{each.name}}
    </li>
  </ul>
<template>

<script>
// imports the components and config files

export default {
  name: "MyList",
  props: {
    elements: {
      type: Array
    }
  }
</script>

this usually happens to me when i'm not declaring my components or have a typo in the declarations. i suggest you install a linter on your IDE to check everything out for you. — Mojo Allmighty
@MojoAllmighty I already have a linter installed. That was the first thing I checked and found no such issues — Sarath Damaraju
When you call listItems(configs['elements']) shouldn't you use this.listItems(configs['elements']) ? — Luccas Paroni

Sarath Damaraju Sarath Damaraju · Accepted Answer · 2019-11-11T13:23:49

It should work, in general. But in my case, the issue is with push in the following function.

 showSlider: function() {
     this.listItems.push(configs['elements'])
},

Storing the same from Vuex and using dispatcher to update the same works like a charm. And I use computed property to load the state from the vueX and pass it to MyList

TypeError: Cannot read property '_wrapper' of undefined

1 Answers