vue js不顯示嵌套的json

Question

我的 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 更長的時間來檢索，即使后者顯示。

有人可以解釋我的誤解嗎？

問候。

Answer 1

我認為您得到的響應如下，其中所有者也是一個字符串。 因此，您可能必須在將其分配給自行車之前對其進行解析。

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

希望這可以幫助。

更新 1

您可以嘗試添加加載標志嗎？ https://v2.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>

Answer 2

所以我找到了根本原因，它與vue無關。

基本上我有兩個模型——車主和自行車。 自行車有一個單一所有者的參考。 車主參考了一系列自行車。 我向兩者都添加了@JsonIdentityInfo。 那是我的問題。

將其更改為僅在所有者中擁有@JsonIdentityInfo 然后允許它工作。

非常感謝所有的建議。