How to get response from an APi call in Vuejs?-CodePudding

import axios from "axios";

export const routerid = async (itemId) =>
  await axios.get("https://fakestoreapi.com/products?limit="   itemId);

<template>
  <div>
    <div v-for="(item, key) in user" :key="key">
      {{ item.price }} <br />
      {{ item.description }} <br />
    </div>
  </div>
</template>

<script>
import { routerid } from "./routerid";
export default {
  name: "User",
  components: {},
  data() {
    return {
      lists: [],
    };
  },
  mounted() {
    if (this.$route.params.id)
      routerid(this.$route.params.id).then((r) => {
        let obj = r.data;
        this.lists = [{ ...obj }];
      });
  },
  computed: {
    user: function () {
      return this.lists.filter((item) => {
        return item.id === this.$route.params.id;
      });
    },
  },
};
</script>

And this is my complete code:- https://codesandbox.io/s/late-brook-eg51y3?file=/src/components/routerid.js

Above is my api call, with url query like url...../?limit=" id

Above is the logic , which i tried. But not sure whats wrong with code. getting blank screen.

please provide some suggestions, on how to call. and please go through my code once, if there is any other issues. Thanks

CodePudding user response：

It's all about spread operator, you should spread object inside array correctly, below example works fine.

<template>
  <div>
    <div v-for="(item, key) in user" :key="key">
      {{ item.price }} <br />
      {{ item.description }} <br />
    </div>
  </div>
</template>

<script>
import { routerid } from "./routerid";
export default {
  name: "User",
  components: {},
  data() {
    return {
      lists: [],
    };
  },
  mounted() {
    if (this.$route.params.id)
      routerid(this.$route.params.id).then((r) => {

        let obj = r.data;
        //changed from [{...obj}] to [...obj]
        this.lists = [...obj];
      });
  },
  computed: {
    user: function () {
      return this.lists.filter((item) => {
        return item.id === this.$route.params.id;
      });
    },
  },
};
</script>

CodePudding user response：

You have 2 problems.

1 - Firstly you're using user instead of lists in the for loop.

2 - Secondly you're using spread operator on the retuned data which is already an array so you don't need to do that.

<template>
  <div>
    <div v-for="(item, key) in lists" :key="key">
      {{ item.price }} <br />
      {{ item.description }} <br />
    </div>
  </div>
</template>

<script>
import { routerid } from "./routerid";
export default {
  name: "User",
  components: {},
  data() {
    return {
      lists: [],
    };
  },
  mounted() {
    if (this.$route.params.id)
      routerid(this.$route.params.id).then((r) => {
        this.lists = r.data;
      });
  },
  computed: {
    user: function () {
      return this.lists.filter((item) => {
        return item.id === this.$route.params.id;
      });
    },
  },
};
</script>