Vue 3，从 POST 解析嵌套的 json 数据答案

【问题标题】：Vue 3, parsing nested json data from POSTVue 3，从 POST 解析嵌套的 json 数据
【发布时间】：2021-11-10 04:04:48
【问题描述】：

我正在尝试从 POST 请求中解析一些数据。我已经成功使用了 Fetch 和 Axios，但是我的问题是解析 JSON。我得到的 JSON 格式如下：

{
    "status": "ok",
    "item": {
        "token": {
            "value": "123123123123123"
        }
    }
}

在我使用的 Fetch 示例中：

const requestOptions = {
    method: 'POST',
    headers: { 
      'Content-Type': 'application/json',
      "Accept": "application/json"
    },
    body: JSON.stringify({ username: "test1", password: "test1" })
  };

fetch('url', requestOptions)
    //.then(response => response.token.json())
    .then(response => response.json())
    .then(data => this.tokens = data)
    .catch(err => console.log(err.message))
}

然后当我尝试显示结果时：

<div v-for="(t) in tokens" :key="t.item">
        <div>
          Fetch: {{ t.token }}
        </div>
</div>

....

export default {
  name: "Header",
  data() {
    return {     
      tokens: []
    };
  },

现在如果我这样做：

Fetch: {{ t }} -> 我得到了整个对象。

如果我这样做：获取：{{ t.token}} -> 我得到了项目，例如：

"value": "123123123123123"

但是，如果我尝试获取令牌（更深 1 级），请执行以下操作：

Fetch: {{ t.token.value }}

然后我什么都得不到。

【问题讨论】：

我在您的名为token 的对象中看不到任何键，据我们所知，它是t.item.value 来获取令牌值。
@Ohgodwhy - 刚刚试过，没用。回击：未捕获（承诺）类型错误：无法在开发工具中读取未定义的属性（读取“值”）。
其实是t.item.token.value
@Radeanu 也没有处理类似的错误：未捕获（承诺）类型错误：无法读取未定义的属性（读取“令牌”）我实际上意识到我在最初的帖子中有一个类型: t.token 对我有用，t.token.value 不行。

标签： json vue.js dictionary post vuejs3

【解决方案1】：

我的错误在于我的数据定义方式。
我必须遵循预期的确切 JSON 格式：

tokens: 
        {
            status: "",
                item: {
                    token: {
                        value: ""
                    }
                }
        }

我现在可以通过以下方式获取价值：

Fetch: {{ tokens.item.token.value }}

【讨论】：