vue js不显示嵌套的json答案

【问题标题】：vue js not displaying nested jsonvue js不显示嵌套的json
【发布时间】：2020-01-22 09:45:52
【问题描述】：

我的 vue.js 代码无法访问返回的 json 对象中的引用。

vue.js 代码

new Vue({
    el: '#axios',
    data: function() {
      return {
        bikes: null,
        baseurl: "https://" + document.querySelector('#axios').dataset.hostportname + "/",

      }
    },
    mounted () {
      axios({
        method: 'get',
        url: 'api/v1/bicycles',
        baseURL: this.baseurl
      })
        .then(response => {
          this.bikes = response.data
          console.log("now bikes are " + JSON.stringify(this.bikes[0].owner.userName));
        }) 
        .catch(error => console.log("There is an error getting bikes: " + error))
    }
  })

如果 HTML 文件（只是一部分）是

<div id="axios" th:data-hostportname="${hostportname}">
    <li v-for="bike in bikes" :key="bike.id">
        {{ bike.make }} -------  {{ bike.owner }}   
    </li> 
</div>

那么html输出就是

dawes --------  { "id": 1, "userName": "user1"}  
whyte --------  { "id": 2, "userName": "user2"}  
whyte --------  { "id": 3, "userName": "user3"}

console.log 输出是

现在自行车是“user1”

如果我尝试单独输出所有者 ID

<div id="axios" th:data-hostportname="${hostportname}">
    <li v-for="bike in bikes" :key="bike.id">
        {{ bike.make }} ------  {{ bike.owner.id }}   
    </li> 
</div>

没有输出，控制台错误为

TypeError: "bike.owner is undefined"

所以 Axios 代码返回了正确的数据。数组中的每个对象都是可访问的。但是每个数组成员中的嵌套对象在字段级别是不可访问的。

为了清楚起见，如果我要求 {{ bike.owner }} 然后我会显示自行车记录引用的原始记录。如果我要求 {{ bile.owner.id }} 那么我得到 console.log 的 Bike.owner 错误是未定义的，并且没有显示任何内容。所以我看不出这是一个加载问题，除非bike.owner.id 需要比bike.owner 更长的时间来检索，即使后者显示。

谁能解释我的误解？

问候。

【问题讨论】：

您是否尝试过添加条件 "{{ bike && bike.owner ? bike.owner.id : "" }}" ？
将你的 bikes:null 的值更改为 bikes: [ {owner:{}}]
似乎是竞争条件问题。该模板试图在 axios 完成请求之前显示 bike.owner.id。
根据@ChristhoferNatalius，我将在该块中添加一个v-if。应该能解决问题。
通常，我将 v-for 包裹在一个 v-if="!loading" 中，并在加载时显示加载动画。所以我在axios调用之前做this.loading = true，在axios.finally做this.loading = false

标签： javascript vue.js

【解决方案1】：

我认为您得到的响应如下，其中所有者也是一个字符串。因此，您可能必须在将其分配给自行车之前对其进行解析。

[{
    make: 'one',
    owner: '{ "id": 1, "userName": "user1"}'
}, {
    make: 'two',
    owner: '{ "id": 2, "userName": "user2"}'
}, {
    make: 'three',
    owner: '{ "id": 3, "userName": "user2"}'
}]

希望这会有所帮助。

更新 1

您可以尝试添加加载标志吗？ https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

new Vue({
    el: '#axios',
    data: function() {
      return {
        bikes: null,
        loading: true
        baseurl: "https://" + document.querySelector('#axios').dataset.hostportname + "/",
      }
    },
    mounted () {
      axios({
        method: 'get',
        url: 'api/v1/bicycles',
        baseURL: this.baseurl
      })
        .then(response => {
          this.bikes = response.data
          console.log("now bikes are " + JSON.stringify(this.bikes[0].owner.userName));
        }) 
        .catch(error => console.log("There is an error getting bikes: " + error)).finally(() => this.loading = false)
    }
  })

并将v-if 添加到您的区块

<div id="axios" v-if="!loading" th:data-hostportname="${hostportname}">
    <li v-for="bike in bikes" :key="bike.id">
        {{ bike.make }} ------  {{ bike.owner.id }}   
    </li> 
</div>

【讨论】：

但它不是字符串。这是对另一个模型的引用，所以我不认为这是问题所在。注意 vue 文件中的控制台日志，打印结果很好。
您是否还检查了数组中的所有条目？我的意思是数组中的每个对象都有一个属性作为所有者吗？我知道这是一个愚蠢的问题，但我现在一无所知。
对您的代码和同样的问题进行了更改-console.log 显示bike.owner 未定义。我不明白的是，如果我显示bike.owner，那么它会显示所有者记录。但如果我显示bike.owner.id 则“bike.owner 未定义”。这就是为什么我不认为这是一个加载问题，因为 bike.owner 显示 id（和 userName 等），但 bike.owner.id 只是对 bike.owner 的深入了解（是吗？）

【解决方案2】：

所以我找到了根本原因，和vue无关。

基本上我有两个模型——车主和自行车。自行车有一个单一所有者的参考。车主参考了一系列自行车。我向两者都添加了@JsonIdentityInfo。这就是我的问题。

将其更改为仅在所有者中拥有 @JsonIdentityInfo 然后允许它工作。

非常感谢所有建议。

【讨论】：