Vue TypeError: Cannot read property '_wrapper' of undefined

Question

I try to write some project, using Vue. When I try to add new item to array in 'data' (which should start re-render), I get this error message:

TypeError: Cannot read property '_wrapper' of undefined.

What does that mean?

[...some layout...]
       <a @click="addElement" id="addBtn">Add</a>
    </span>
  </div>
</template>

<script>
  export default {
      props: [
          'routes'
      ],
      data: function () {
          routes: this.props.routes
      },
      methods: {
          addElement: function () {
              this.routes.push( {[...some object...]} );
          }
      }
  }
</script>

Ankit Kante Ankit Kante · Accepted Answer · 2019-11-29T17:01:26

data in Vuejs is a function that returns an object. Your code is not returning an object.
Your prop name is same the data name. They should be different.

Try the following code:

[...some layout...]
       <a @click="addElement" id="addBtn">Add</a>
    </span>
  </div>
</template>

<script>
  export default {
      props: [
          'routes'
      ],
      data: function () {
         return {         // Object being returned
             storedRoutes: this.routes   // props can be directly accessed using `this`
         }
      },
      methods: {
          addElement: function () {
              this.storedRoutes.push( {[...some object...]} );
          }
      }
  }
</script>

I also changed this.props.routes to this.routes

Vue TypeError: Cannot read property '_wrapper' of undefined

1 Answers