How can i access multiple object in a nested array and push them all at the same time using Vue?

Question

let app = new Vue({
  el: "#app",
  data: {
    currentperson: -1,
    people: [{
      nome: "Francesco Rossio",
      immagine: "img/profile1.jpg",
      oraUltimoMessaggio: "13:32",
      messaggiNonLetti: "2",
      visibile: true,
      messaggi: [{
        date: '10/01/2020 15:30:55',
        text: 'Hei tu, sei molto carino, sai?',
        status: 'sent'
      }, {
        date: '10/01/2020 15:50:00',
        text: 'Sai che mi piacciono le ciabatte?',
        status: 'sent'
      }, {
        date: '10/01/2020 16:15:22',
        text: 'Ora sai tutto di me.',
        status: 'received'
      }],
    },

this is my array and my object, I want all of the "text" object to be cycled once with a v-for. Is it possible? I've been trying for hours whatever I do I can't get at the end of it.

Hint: you need two for loop

Niklesh Raut
– Niklesh Raut

2022-01-24 04:10:43 +00:00
Commented Jan 24, 2022 at 4:10 — Niklesh Raut
– Niklesh Raut, Commented Jan 24, 2022 at 4:10

tony19 · Accepted Answer · 2022-01-24 04:28:49Z

2

The arrays should be rendered with the v-for directive, nesting the v-for for the nested array:

<ul>
  <li v-for="person in people" :key="person.nome">
    <span>{{ person.nome }}</span>
    <ul>
      <li v-for="msg in person.messaggi" :key="msg.date">{{ msg.text }}</li>
    </ul>
  </li>
</ul>

demo

answered Jan 24, 2022 at 4:28

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i access multiple object in a nested array and push them all at the same time using Vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related