0

I have a Nuxt project of listing booking.

I have done all my API calls and configuration in index.js in the store folder. I would link to display the listing gotten from the API call on my listing.vue page.

How do I print my retrieved data or make my index.js accessible anywhere in the app?

package.json

{
  "name": "lisngbook",
  "version": "1.0.0",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
  },
  "devDependencies": {
    "@nuxtjs/moment": "^1.6.1"
  },
New Way
  • 1
  • 1
  • What does your file directory looks like? – Kyrony Dec 23 '22 at 16:44
  • Hi, firstly please do not use `momentjs` anymore, it's a dead project. Use `date-fns` or any other alternatives listed on [moment's official website](https://momentjs.com/docs/#/-project-status/recommendations/). Then, it would be useful for us to know: 1. the content of your `index.js` file 2. the content of your `listing.vue` file 3. the object you're receiving from the backend so that we know how we can _massage_ it accordingly. Please also indent and highlight it as I did with your current question. – kissu Dec 23 '22 at 18:01
  • Images are unfortunately not allowed here. Please edit your question with your code as actual text. – kissu Dec 27 '22 at 11:56
  • I'm not sure how to fix your `store/index.js` file I have to say, but as of right now it's not a valid JS file. Regarding the whole thing, I'm not sure if there is a given issue if your code works and you have the proper payload. A relevant next step would be to know how you want to display it in your `listing.vue` page. Your payload looks quite friendly and you could iterate on it with a `v-for` and access the various fields to your liking. What kind of issue do you face exactly? – kissu Dec 27 '22 at 16:36
  • i want to display it in this div " replace the image, description address.. by the data gotten from the API the dis play them in grid form – New Way Dec 27 '22 at 17:35
  • I did not understand your last comment sorry. How do you want to display it? Got some visual as an example? – kissu Dec 27 '22 at 17:44
  • i want to display it in the listing page where all data got from the API is used to create listings on that page " images up - title and description down in a 3-column grid form – New Way Dec 28 '22 at 08:38
  • We still have no idea what the` listing.vue` page looks like tbh. It's currently too broad of a question. You can have this [quick example](https://stackoverflow.com/a/67490633/8816585) on how to achieve some dynamic API injection into a markup. For the rest, it's a matter of CSS (flexbox, grid, etc...). We would need to know what you have already tried by yourself here and what is not working. – kissu Dec 28 '22 at 10:32
  • i think i found a solution for the first part of it sln 1 - Test if the data is passing by adding "
    {{ this.$store.state.properties }}
    " If all the data gotten are displaying I used these export default { async asyncData({ store }) { return { properties: store.state.properties } }, } then these to loop     – New Way Dec 30 '22 at 08:12
  • You don't need `this` in the template. Otherwise, this is indeed a viable approach. – kissu Dec 30 '22 at 09:00
  • ok i get iy the problem is when in use it on the listing.vue page is displaying but if i use it in the homepage component "recently added" it will show me Property or method "properties" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. – New Way Dec 30 '22 at 10:00
  • Let's focus on one issue at a time and also, please edit your question with the relevant material so that we can help you efficiently. – kissu Dec 30 '22 at 13:48
  • Sorry for that @kissu 1- i think I found the reason why it wasn't displaying in a component " needed to replace v-for="property in properties" :key="property.id" with v-for="property in $store.state.properties" :key="property.id"" when accessing it in a component – New Way Dec 30 '22 at 16:52
  • @kissu are you on Discord ?? – New Way Dec 30 '22 at 16:54
  • Currently the project 1- Receive Data from the APIs 2- Display them on the listing.vue page 3- displays them on any app component But I still have 2 major problem – New Way Dec 30 '22 at 16:57
  • 1- description: it's not displaying ( after or under the location i have tried this

    {{ property.description }}

    but nothing is displaying 2- Whenever i make change my project ", especially the script" my website always gives an error message of " can not read properties on undefine (reading 0) .at this point I need to re-run the project one more time. but I refresh the page it will still do that     – New Way Dec 30 '22 at 16:58
  • I am on Discord indeed (everything available on my profile). As for the rest, you should not use `v-html` and the rest, I guess we'll need more details or a narrowed down issue. – kissu Dec 30 '22 at 17:17
  • And yeah, `asyncData` is available only on pages. `fetch()` (the lifecycle) is available everywhere tho. – kissu Dec 30 '22 at 17:18
  • i have acctually use v-html and nomal second one of {{ property.description }} but no wan is given – New Way Dec 31 '22 at 14:59
  • Hard to help you here since we have no code/context. Let's make it efficient for the next round! – kissu Dec 31 '22 at 15:02

0 Answers0