在 VueJS 中获取 json 数据

Posted 2023-02-22

【中文标题】在 VueJS 中获取 json 数据

【英文标题】：Get json data in VueJS

【发布时间】：2021-09-16 06:29:37

【问题描述】：

onMounted(() => 
  productService.value
    .getProducts()
    .then((data) => (products.value = data));

  console.log((products))
);

当我使用 console.log 打印 products 时，这里有我所拥有的。

capture of the console

我看到我想要的数据在 RawValue 中，但我不知道如何访问它们。 我尝试了 Object.values(products) 或只是 console.log(products._rawValue) 或 console.log(products.rawValue) 它打印 undefined。

你知道什么函数调用吗？

谢谢

【问题讨论】：

您需要在数据属性中定义变量并用传入的数据填充它们。

我如何用传入的数据填充它们？

尝试控制台记录“数据”以验证其结构。您实际上可能需要将“products”（或“products.value”）设置为数据属性，例如products.value = data.products。

嗨@KateP，我只是想确定一下，这些数据是否来自firebase？ P.S. 如果您告诉我们您使用什么包来接收该数据，这将真正帮助我们。

【参考方案1】：

用 axios 我做的是用 response.data 取出数据，你可以试试

                    onMounted(() =>  
                    productService.value.getProducts().then((response) => (
                        products = response.data
                        )); 
                        console.log(products.length); 
                );

【讨论】：

非常感谢您的回答。不幸的是它不起作用，因为 products 不是直接的数组，但在 products 中有 rawValue 中的数组

尝试 onMounted(() => productService.value .getProducts() .then((response) => (products= response.data)); console.log(products); ) ;

【参考方案2】：

有两个问题

#1 - 您正在使用 console.log(products) 向您显示反应对象，而您需要的是 console.log(products.value) 它将仅显示值，该值应与 data.produtcs 的内容匹配

#2 - 你可能会发现? 现在显示一个空结果。发生这种情况的原因是您在异步函数之后但在它完成之前调用控制台日志，因此您在它有机会更新之前调用它。要解决这个问题，您可以将日志作为异步功能的一部分

onMounted(() => 
  productService.value
    .getProducts()
    .then((data) => 
      products.value = data;
      console.log(products.value);
    )
);

如果您在模板中使用products，则无需担心异步函数之前或之后的内容，因为它会在更改时重新渲染组件。

另外，您可能不需要将productService 定义为ref，该类可能不需要响应式，因此您可以只做简单的分配，然后跳过.value 来调用getProducts

【讨论】：

非常感谢它成功了！事实上，我正在尝试 products.value，但它显示的是一个空结果，现在放在你说没问题的地方