Vue – access JSON data in method

Question

I'm trying to write a simple function in the methods. It should create an array out of JSON data.

The JSON object is called page with another object called images containing height, orientation etc.

setup () {
   return {
     page: usePage(),
   }
},

methods: {
   getOrientations() {
      this.page.images.forEach((item) => {
      console.log(item
  })
}

Unfortunately it throws an undefined is not an object error. Logging only this.page however prints the whole object.

Does this.page.images not work when using it inside a method? Because it works when using it "inline" in HTML.

Thanks for any tips!

What is setup? I never saw this in Vue. It should be data instead. — user1829232
– user1829232, Commented Jan 5, 2021 at 13:47

Gaetan C. · Accepted Answer · 2021-01-05 14:09:24Z

3

You are currently using the Composition API (setup function) alongside the options-based API (methods object). Although it is possible, it is not recommended (take a look at their motivation). Your methods should stand in the setup function:

setup () {
  const page = usePage()
  page.images.forEach((item) => {
    console.log(item)
  })
  return {
    page,
  }
},

Of course, you could still modularize this code using functions.

setup() {
  // ...
  const getOrientations = () => {
    page.images.forEach((item) => {
      console.log(item)
    })
  }

  // And make it available to your template
  return {
    // ...
    getOrientations
  }
}

edited Jan 5, 2021 at 14:09

answered Jan 5, 2021 at 14:02

Gaetan C.

1,91416 silver badges23 bronze badges

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

3 Comments

Too Over a year ago

Hi! Ah ok, thanks for the insight! Is there a reason why the console now prints the actual code of the variable? Sorry, I'm kind of new to maybe complicated JS, maybe this is a silly question.

Too Over a year ago

Unfortunately the error 'TypeError: undefined is not an object' persists even with the changed setup function

Gaetan C. Over a year ago

Then I think your error is not related to this problem. Could you copy the full stacktrace?

Collectives™ on Stack Overflow

Vue – access JSON data in method

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related