How to push an object to array in data properties in nuxtjs

Question

I want to push object into array inside data properties in my nuxt project. but i am getting error like

Cannot read properties of undefined (reading 'push')

here is my js part

<script>
export default {
  data() {
    return {
      form: {
        gallery: [{
          id: null,
          imgurl: null
        }]
      }
    }
  },

  methods: {
    async uploadGallery() {
      var myimg = "imageurl getting after upload";
      var imgData = {};
      imgData['imgurl'] = myimg;
      imgData['id'] = "someid";
      this.form.gallery.push(imgData);
    },
  }
}
</script>

This means that this.form.gallery is undefined at some point. You probably have some async issues somewhere else in your code. — kissu
– kissu, Commented Jan 8, 2022 at 20:56
Also, feel free to write it like this imgData.imgurl, simpler. — kissu
– kissu, Commented Jan 8, 2022 at 20:59
pardon me ! it was all typo issue on my backend side, in asyncdata i replace local form data from using returned value from api. in backend i mistyped gallery as galley, thats why i was facing such issue. — imthegrv
– imthegrv, Commented Jan 9, 2022 at 11:52
'this' content is available at the "fetch" hook. You are probably calling the method in created hook. More information about nuxt life cycle: nuxtjs.org/docs/concepts/nuxt-lifecycle — mokumus
– mokumus, Commented Jan 11, 2022 at 10:44

Halil İbrahim HURMUZ · Accepted Answer · 2022-01-11 10:13:31Z

1

l tried your code like above. When l clicked the button, it was working. Probably you couldn't reach form.gallery becuse triggered uploadGallery is in wrong life cycle hooks.

<template>
  <div>
    {{form.gallery}}
     <button @click="uploadGallery">click</button>
  </div> 
</template>

answered Jan 11, 2022 at 10:13

Halil İbrahim HURMUZ

211 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to push an object to array in data properties in nuxtjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related