JSON 对象在 API 调用和前端之间丢失信息

Question

我正在制作一个从 REST 获取信息的网站api我自己编写和托管，到目前为止没有数据问题。

现在我正在尝试对 json 对象进行简单检索，并且我正确获取了所有信息，如 API 中所示。（在 Swagger 中可视化和测试）

如您所见，它正确检索了完整的对象和底层对象（敏感信息模糊）。

不过请注意属性“AmountOfEggs”。

现在，当我在我的站点中调用此 api 端点（完全相同的方式）并 console.log result.data 时，这就是反馈。

现在由于某种原因我无法在我的前端接收 AmountOfEggs。

我重新创建了整个对象，写了不同的名字，传递了不同的props（Id，NumberBus等在这种情况下传递没有问题，也是int（数字）类型）。

我不知道为什么这个属性在传输中被“删除”并填充 with/defaults 为空字符串。

如有任何帮助，我们将不胜感激。

Answer 1

我找到哪里出错了，是因为不同的因素。

首先，我使用 Vue 框架制作这个网站，该框架具有反应式组件，这意味着，数据会得到调整，您可以在 views/pages.

上获得实时更新的组件

在包含调用的页面中，我还想添加动态样式。我为此使用的代码如下：

v-for="seller in retrievedSellers"
      :key="seller.Id"
      :class="[
        'sellerStyle'
        , (seller.AmountOfEggs = 0 ? 'grey-out-seller' : ''),
      ]"

现在需要注意两点，首先这可能看起来像后端编码，但这是 .vue 文件上的 Vue 逻辑，它处理 Vue 提供的动态选项，所以我从没想过要在这里查找错误。

couse 的错误是 'seller.AmountOfEggs = 0' 部分，使用一个等号（赋值）而不是两个（比较）。

所以我学到了，

Vue 不会在用于生成前端的代码中的赋值上抛出错误（您永远不应在其中更改数据）。
我的 console.log 是 API 的响应出现的那一刻，显然它在点击 console.log 之前已经被分配了一个新值（由于我上面的代码） .

Vue 在完成 api 调用本身之前首先处理 ^this^ 以确保您的反应组件是最新的，这仍然让我感到非常惊讶。

但是，我还是不明白它怎么说“”而不是0。

我使用的是打字稿（javascript 强类型）所以它肯定想要包含一个数字而不是一个空字符串。即使在我的 DTO 声明中，属性也被定义为（并期望）一个数字。

JSON 对象在 API 调用和前端之间丢失信息

JSON object losing info between API call and Frontend

rest

json

properties

dto

vue.js