Vue 3，解析来自POST的嵌套json数据

Question

我试图从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}} ->我得到了整个对象

如果我这样做:Fetch: {{t.token}} ->我得到项目，如:

"value": "123123123123123"

然而，如果我试图获得令牌(更深一层)，通过执行:

Fetch: {{ t.token.value }}

那我什么也得不到。

Answer 1

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

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

我现在可以通过以下操作访问value:

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