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>Y este es mi código completo:- https://codesandbox.io/s/late-brook-eg51y3?file=/src/components/routerid.js
Arriba está mi llamada api, con consulta de URL como url...../?limit=" + id
Arriba está la lógica, que probé. Pero no estoy seguro de qué está mal con el código. obteniendo la pantalla en blanco.
proporcione algunas sugerencias sobre cómo llamar. y revise mi código una vez, si hay algún otro problema. Gracias
Se trata del operador de propagación, debe distribuir el objeto dentro de la matriz correctamente, el siguiente ejemplo funciona bien.
<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>Tienes 2 problemas.
1 - En primer lugar, está utilizando user en lugar de las lists en el ciclo for .
2 - En segundo lugar, está utilizando el operador de propagación en los datos devueltos que ya son una matriz, por lo que no necesita hacer eso.
<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>