vue.js - 无法循环通过 Vue 3 Reactive Array 道具(代理)
问题描述
任务
我正在研究产品市场。每个产品都有一个 ID 和一堆与每个产品相关的信息。
有一个产品包装的概念,它只是一个产品,它是其他产品的捆绑。
在 GET PACKAGES 响应中,有一组与此包中的产品相关的 ID。在页面的其他位置,我请求产品列表,所以我已经有了我需要的数据,我只需要连接两个数据集。
该任务涉及在 UI 中显示包,以及通过两个数据集之间的 ID 连接的每个产品的描述(在 GET PRODUCTS 的另一个响应中)。
设置说明
我有一个父组件,它调用 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
prop 仍然是一个空数组。您在控制台中看到数据的原因是,当您单击控制台时控制台会自行更新,并且此时父级的异步请求已完成。
这只发生在引用中,因此您product[0]
在记录时看不到没有引用的单个数组项。
在道具上使用watch
(或watchEffect
)等待获取项目:
setup(props) {
const productData = props.products;
watch(() => productData.length, () => {
productData.forEach((item) => {
console.log(item)
})
})
}
或者,您可以v-if
在父级中使用 a :
<template v-if="packages.length && products.length">
<package
v-for="package in packages"
:key="package.id"
:packages="package"
:products="products"
></package>
</template>
推荐阅读
- deep-learning - RuntimeError:cuda 运行时错误(710):设备端断言触发于
- c++ - 示例代码中的范围问题,使用分隔符将 std::string 拆分为字符串的 std::vector
- node.js - Chrome错误的响应编码
- flutter - 如何在 Flutter Create 中指定本地语言?
- c - 在 C 中运行 Ruby
- python - 训练后如何使用带有 keras 的 VGG16 预测图像(外部数据集)?
- javascript - 如何将 setTimeout 添加到随机 MP3 列表
- python - 编写一个函数以使用正则表达式从字符串中提取整数
- python - Flask set_cookie 没有设置 cookie
- haskell - 如何生成使用 MVar 的数据类型?