CODEWITHSUNDEEP
vue.jsvuejs3vue-composition-api
Too
Too

Reputation: 727

Vue access object in data

I'm new to Vue and can't figure the following out. I have an app which connects to a JSON Api via a usePage()

usePage() let's me use "page" as an object which I can use and access inside the tag.

Like:

<p>This product costs {{page.price}} Euros and is {{page.width}} wide and {{page.colour}}</p>

However, can I access this "page" object also in the data() or methods: ?

Like:

export default {
  components: {
    …
  },
  
  // Vue 3 setup
  setup () {
    return {
      page: usePage(),
    }
  },
  
  data: function() {
    return {
      product: {
        price: this.page.price,
        width: this.page.width,
        colour: this.page.colour
      }
    };
  }
}

It seems to return undefined. Is it not possible in Vue to access the same objects outside the <template> tag than inside the <template> tag?

Thanks for any tips!

Upvotes: 0

Views: 781

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You should not interchange properties between setup and other options like data, methods ..., in your case you could use a computed property instead of data option :

import {computed} from 'vue'

export default {
  components: {
    …
  },
  
  // Vue 3 setup
  setup () {

   const page = usePage();
   const product= computed(()=>({
        price: page.price,
        width: page.width,
        colour: page.colour
      }))
    return {
      page,product
    }
  },
  
 
}

Upvotes: 2

Related Questions