Как перебирать вложенные объекты с помощью цикла v-for

Я работаю над некоторым практическим кодом, который имеет дело с информацией о карте, в котором вы можете отобразить подробную информацию о выбранной карте, щелкнув одну из карт на экране.

Как показано на снимках экрана, если вы выберете одну из желтых карточек, она отобразит более подробную информацию о выбранной карточке с зеленым и синим цветом фона.

before_expanding

введите здесь описание изображения

Я реализовал это с помощью цикла v-for, но проблема в том, что подробная информация о карточке представляет собой объект JSON, содержащий внутри несколько объектов JSON, и мне не удалось отобразить все элементы в форме, отличной от JSON.

Я нашел несколько страниц (например, ссылку ниже), где обсуждались некоторые способы перебора вложенных объектов, но это был простой код JavaScript, и я не мог использовать ту же стратегию для цикла v-for.

Как пройти простой Объект JavaScript с объектами в качестве членов?

Я понимаю идею, что вы должны просто продолжить цикл, если член является другим объектом, а не примитивным типом данных, но я не знаю, как реализовать ту же логику в цикле v-for.

Может ли кто-нибудь сказать мне, как это сделать?

Вот мой код.

(V-образная петля)

<div v-for="(obtainedCardInfo, index) in obtainedCardsInfo">
  <span v-if="cardBtnChosen && card.id == selectedCard && obtainedCardInfo.id == selectedCard">                                 
    <span class="cardInfo">DETAILED CARD INFO:</span>  
      <div class="cardInfoDisplay">
        <div v-for="(detailedInfo,index) in obtainedCardInfo" :key="index"> 
          <p v-if="obtainedCardInfo[index]"> {{index}} : {{obtainedCardInfo[index]}} </p>
          <p v-else> {{index}} : NULL </p>
        </div>
      </div> <br>
  </span> 
</div>

и вывод для моего текущего кода.

DETAILED CARD INFO:
accountId : 3917674

id : 3918534

customerId : 998774

cardRole : MAIN

cardStatus : CARD_OK

truncatedCardNumber : 524804______9042

cardTemplate : MC_CARD

cardAddress : NULL

usageLimits : [ { "code": "WEEKLY", "values": null }, { "code": "DAILY", "values": [ { "code": "ATM", "singleAmount": 200, "count": 3, "sumAmount": 300 } ] }, { "code": "MONTHLY", "values": [ { "code": "ATM", "singleAmount": null, "count": 1000, "sumAmount": 1000000 } ] } ]

expiration : { "year": 2022, "month": 6 }

pinAddress : NULL

regionAndEcommBlocking : { "ecomm": false, "africa": false, "asia": false, "europe": false, "home": false, "northAmerica": false, "oceania": false, "southAmerica": false }

vue.js v-for nested-object
person Sean2014    schedule 23.07.2019    source источник
comment
Итак, ваша проблема в том, что obtainedCardInfo не является массивом, в котором вы можете зацикливаться? Вы можете решить эту проблему, например вызывая метод, преобразующий ваш объект в желаемую форму (<div v-for="(detailedInfo,index) in convertToArray(obtainedCardInfo)" :key="index">). Лучшим способом было бы передать объект новому компоненту в качестве опоры. Там вы можете создать вычисляемое свойство, которое преобразует объект в структуру с возможностью цикла. Или можно поподробнее, в чем именно заключается проблема?   -  person ssc-hrep3    schedule 23.07.2019
comment
Проблема в том, что obtainedCardInfo - это всего лишь один из объектов в массиве obtainedCardsInfo (обратите внимание, что после «Card» стоит буква s). Если вы хотите получить данные obtainedCardInfo по вычисляемому свойству, вы должны указать, из какого индекса массива obtainedCardsInfo они нужны. Но я не знаю, как это сделать.   -  person Sean2014    schedule 24.07.2019
comment
Если вы используете другой компонент, вы можете передать компоненту один объект как опору в цикле v-for. Тогда дочерний компонент получает только один объект вместо всего массива. И тогда он может иметь вычисляемое свойство. Затем существует несколько таких дочерних компонентов с разными данными о свойствах. Пример: <div v-for="element in arrayOfElements"><child-component :data="element" /></div> Затем вы можете определить вычисляемое свойство в child-component.   -  person ssc-hrep3    schedule 24.07.2019
comment
Я сейчас пытаюсь это сделать, но тут возникает другая проблема. stackoverflow.com/questions/57198880/   -  person Sean2014    schedule 25.07.2019
comment
Рад, что вы смогли решить проблему (в другом вопросе) ????   -  person ssc-hrep3    schedule 25.07.2019
comment
Да, теперь я могу сосредоточиться на вычисляемой части свойств!   -  person Sean2014    schedule 25.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

V-for просто перебирает массив или ключи объекта.

v-for выполняет итерацию по каждому элементу в массиве

v-for также перебирает ключи в объекте

Вы также должны переместить свою логику в вычисляемый метод

<template>
<p v-for:"item, index in arr" />
     {{ item  }}
     {{ index }}
<p v-for:"item, key in obj" />
     {{ item  }}
     {{  key  }}
<br />
</template>
<script>
export default {
    data() {
       return {
           arr:[1,2,3,4,5],
           obj: { 1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: 'e' }
        }
    },
    computed: {
        // do computation here
        doSomething() {
        }
    }
}
</script>
person bjhoohaha    schedule 23.07.2019
comment
Не могли бы вы сказать мне, какую часть логики, которую я продемонстрировал в приведенном выше коде, следует перенести в вычисляемую? - person Sean2014; 24.07.2019