VueJS3/Vuex-如何顯示嵌套json結果中的資料

親愛的，

我已經為此苦苦掙扎了好幾個小時，甚至遵循了基礎教程。

我試圖在我的 Vue 3 專案中以 Json 顯示一些資料，當資料在陣列中時，使用回圈我得到我需要的一切，但如果它不在陣列中，我會收到錯誤或資料粘在一起。

我創建了一個像這樣的 vuex 商店：

const region = {
    state: {
        region: {}
    },
    mutations: {
        SET_REGION(state, region) {
            state.region = region
        }
    },
    actions: {
        getAllRegions({ commit }) {
            axios.get("/api/regions/get")
                .then(response => {
                    commit('SET_REGION', response.data)
                })
        }
    },
    getters: {
        getAllRegions (state) {
            return state.region
        },
        getDelegue (state) {
          return state.region.delegue
        }
    }
};

當我在我的頁面中呼叫這些資料時，我得到了這個結果：

[
 {
  id: 3,
  name: "Occitanie",
  agents: [ ],
  delegue: null
 },
 {
  id: 2,
  name: "Ile de France",
  agents: [ ],
  delegue: null
 },
 {
  id: 4,
  name: "Hauts de France",
  agents: [ ],
  delegue: null
 },
 {
  id: 1,
  name: "Grand Est",
  agents: [
   {
    lastname: "DOE",
    firstname: "John",
    phone: " 331234567890",
    user: {
     email: "[email protected]"
    }
   }
  ],
  delegue: {
   lastname: "DURSLEY",
   firstname: "Jake",
   phone: " 3309987654321",
   user: {
    email: "[email protected]"
   }
  }
 }
]

結果對我來說似乎很好。現在在我的 Vue 中，我想顯示資料，這是我在“DELEGUE”資料方面遇到麻煩的地方。

<div v-for="region in myFunctionToRetrieveJsonData">
    <p>Name: {{ region.name }}</p> // WORKING

    <p v-for="agent in region.agents">
        {{ agent.lastname   ' '   agent.firstname }}<br> // WORKING
        {{ agent.phone }}<br> // WORKING
        <span v-for="email in agent.user">{{ email }}</span> // WORKING

        // THIS WAY
        Delegue: {{ agent.delegue.lastname   ' '   agent.delegue.firstname }} // NOT WORKING

        // ALSO THIS WAY
        Delegue: {{ agent.delegue[0].lastname   ' '   agent.delegue[0].firstname }} // NOT WORKING

        // THE OTHER WAY
        <p v-for="delegue in region.delegue">
            Delegue: {{ delegue }} // DISPLAY: DURSLEYJake 3309987654321{"email":"[email protected]"} NOT GOOD
        </p>
    </p>
</div>

我收到此錯誤： Uncaught (in promise) TypeError: Cannot read properties of null (reading 'lastname')

所以我知道對于用戶我可以做一個 v-for 回圈，但在 DELEGUE 的情況下，我不能立即訪問，或者如果我做一個回圈，我所有的資料都沒有分離，我可以'不能使用它。

你們有什么想法嗎？

非常感謝您的幫助。

洛根

uj5u.com熱心網友回復：

如果我理解正確，請查看以下代碼段：

new Vue({
  el: '#demo',
  data() {
    return {
      items: [
        {id: 3, name: "Occitanie", agents: [ ], delegue: null},
        {id: 2, name: "Ile de France", agents: [ ], delegue: null},
        {id: 4, name: "Hauts de France", agents: [ ], delegue: null},
        {id: 1, name: "Grand Est", agents: [{lastname: "DOE", firstname: "John", phone: " 331234567890", user: {email: "[email protected]"}}], delegue: {lastname: "DURSLEY", firstname: "Jake", phone: " 3309987654321", user: {email: "[email protected]"}}}
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="region in items">
    <p>Name: {{ region.name }}</p>
    <p v-for="agent in region.agents">
       {{ agent.lastname   ' '   agent.firstname }}<br> 
       {{ agent.phone }}<br> 
       <span v-for="email in agent.user">{{ email }}</span>
       Delegue: {{region.delegue?.lastname   ' '   region.delegue?.firstname }}
    </p>
    
  </div>
</div>

標籤：javascript json Vue.js Vuex Vuejs3

上一篇：Laravel8If陳述句哪個更好

下一篇：我如何除錯這個重復的錯誤（Vue.js2）