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
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>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>