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>這是我的完整代碼：- https://codesandbox.io/s/late-brook-eg51y3?file=/src/components/routerid.js
以上是我的 api 呼叫，帶有 url 查詢，如url...../?limit=" id
以上是我嘗試過的邏輯。但不確定代碼有什么問題。得到空白螢屏。
請提供一些建議，關于如何打電話。如果還有其他問題，請檢查我的代碼一次。謝謝
uj5u.com熱心網友回復：
這都是關于傳播運算子的，你應該正確地在陣列中傳播物件，下面的例子作業正常。
<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>uj5u.com熱心網友回復：
你有2個問題。
1 - 首先你在回圈中使用user而不是。listsfor
2 - 其次，您對已經是陣列的重新調整的資料使用擴展運算子，因此您不需要這樣做。
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/426722.html
標籤：javascript Vue.js
下一篇：for回圈中的Vue動態表單元素