无法循环通过 Vue 3 Reactive Array 道具(代理)
Unable to loop through Vue 3 Reactive Array prop (proxy)
任务
我在产品市场上工作。每个产品都有一个 ID 和一堆与每个产品相关的信息。
有一个产品包的概念,简单来说就是一个产品捆绑其他产品。
在 GET PACKAGES 响应中,有一组 ID 与此包裹内的产品相关。在页面的其他地方,我请求了一个产品列表,所以我已经有了我需要的数据,我只需要连接两个数据集。
该任务涉及在 UI 中显示包裹,以及每个产品的描述(在 GET PRODUCTS 的另一个响应中),这两个数据集之间通过 ID 连接。
设置说明
我有一个父组件,它调用 GET PRODUCTS 和 GET PACKAGES。
我将包传递给可重用的 Vue 组件,以在 UI 中显示该包的基本信息。除此之外,我还将所有产品传递给组件,以便我们可以获得正确的产品描述以显示在包的预览中 UI。
问题
当将产品列表向下传递到子组件时,我可以很好地控制台记录整个产品数组,但是第二次我尝试循环遍历它们(通过 MAP 或 FOREACH)没有任何反应。循环内没有控制台日志;就像循环甚至没有 运行.
父组件代码
<package
v-for="package in packages"
:key="package.id"
:packages="package"
:products="products"
></package>
// I get both sets of data in beforeOnMount and push it to the below variables
const packages = reactive<Array<Package>>([]);
const products = reactive<Array<Product>>([]);
子组件代码
props: {
packages: Object as () => Package,
products: Object as () => Array<Product>
}
setup(props) {
const uiPackages= reactive<Array<IPackageDetails>>([]);
const productData = props.products;
// This console log's a Proxy, with the handler containing an array of objects perfectly fine.
console.log(productData);
if (productData) {
// This console log's undefined
console.log(productData[0]);
productData.forEach((product) => {
// This does NOTHING in console!
console.log(product)
}
}
}
子组件中productData的控制台日志
当子组件初始化时,products
属性仍然是一个空数组。您在控制台中看到数据的原因是当您单击它时控制台会自行更新,到那时父级的异步请求已完成。
这只发生在引用中,因此您在记录时看不到没有引用的单个数组项 product[0]
。
在道具上使用watch
(或watchEffect
)等待物品被取走:
setup(props) {
const productData = props.products;
watch(() => productData.length, () => {
productData.forEach((item) => {
console.log(item)
})
})
}
或者,您可以在父级中使用 v-if
:
<template v-if="packages.length && products.length">
<package
v-for="package in packages"
:key="package.id"
:packages="package"
:products="products"
></package>
</template>
任务
我在产品市场上工作。每个产品都有一个 ID 和一堆与每个产品相关的信息。
有一个产品包的概念,简单来说就是一个产品捆绑其他产品。
在 GET PACKAGES 响应中,有一组 ID 与此包裹内的产品相关。在页面的其他地方,我请求了一个产品列表,所以我已经有了我需要的数据,我只需要连接两个数据集。
该任务涉及在 UI 中显示包裹,以及每个产品的描述(在 GET PRODUCTS 的另一个响应中),这两个数据集之间通过 ID 连接。
设置说明
我有一个父组件,它调用 GET PRODUCTS 和 GET PACKAGES。
我将包传递给可重用的 Vue 组件,以在 UI 中显示该包的基本信息。除此之外,我还将所有产品传递给组件,以便我们可以获得正确的产品描述以显示在包的预览中 UI。
问题
当将产品列表向下传递到子组件时,我可以很好地控制台记录整个产品数组,但是第二次我尝试循环遍历它们(通过 MAP 或 FOREACH)没有任何反应。循环内没有控制台日志;就像循环甚至没有 运行.
父组件代码
<package
v-for="package in packages"
:key="package.id"
:packages="package"
:products="products"
></package>
// I get both sets of data in beforeOnMount and push it to the below variables
const packages = reactive<Array<Package>>([]);
const products = reactive<Array<Product>>([]);
子组件代码
props: {
packages: Object as () => Package,
products: Object as () => Array<Product>
}
setup(props) {
const uiPackages= reactive<Array<IPackageDetails>>([]);
const productData = props.products;
// This console log's a Proxy, with the handler containing an array of objects perfectly fine.
console.log(productData);
if (productData) {
// This console log's undefined
console.log(productData[0]);
productData.forEach((product) => {
// This does NOTHING in console!
console.log(product)
}
}
}
子组件中productData的控制台日志
当子组件初始化时,products
属性仍然是一个空数组。您在控制台中看到数据的原因是当您单击它时控制台会自行更新,到那时父级的异步请求已完成。
这只发生在引用中,因此您在记录时看不到没有引用的单个数组项 product[0]
。
在道具上使用watch
(或watchEffect
)等待物品被取走:
setup(props) {
const productData = props.products;
watch(() => productData.length, () => {
productData.forEach((item) => {
console.log(item)
})
})
}
或者,您可以在父级中使用 v-if
:
<template v-if="packages.length && products.length">
<package
v-for="package in packages"
:key="package.id"
:packages="package"
:products="products"
></package>
</template>